Updating color of an element in SVG and Angular2+ according to the background

In my svg element, I have a text element positioned after two rect elements.

<svg id="floor-plan" width="300" height="100">
<rect width="300" height="100" fill="white"/>
<rect width="50" height="50" fill="green"/>
<text x="10" y="10" dy="1.5em" fill="white">dfdklsfjsadgkldsjfglkdsjfklögj</text>

The size of the second rect is smaller than the text element. I am looking for a way to change the color of the text element if it extends outside the boundary of the first rect and overlaps with the green rect.

Any suggestions on how to achieve this?

Thank you in advance.

This question has been addressed in a similar context here: Change SVG color based on current background

angulartypescriptsvg

Answer №1

Make sure to add some style classes and update the CSS file in this manner:

<svg viewBox="0 0 300 80" xmlns="http://www.w3.org/2000/svg">
  <style>
    .small { font: italic 13px sans-serif; }
    .heavy { font: bold 30px sans-serif; }

    /* Note that text color is defined using fill property, *
     * while the color property is only used for HTML */
    .Rrrrr { font: italic 40px serif; fill: red; }
   </style>

  <text x="20" y="35" class="small">Мой</text>
  <text x="60" y="35" class="heavy">кот</text>
  <text x="60" y="55" class="small">очень</text>
  <text x="100" y="55" class="Rrrrr">Сердит!</text>
</svg>

For more details, you may refer to: https://developer.mozilla.org/ru/docs/Web/SVG/%D0%AD%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82/%3Ctext%3E

Let me know if this information was helpful!

Answer №2

provides information on how mix-blend-mode can be used in SVG as well.

text {
   mix-blend-mode: difference;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Struggling with setting up the onChange function in a Next.js application

After successfully writing and testing the code here, I encountered an error preventing me from building it. Please review the code for any issues. I am attempting to set onChange to handle user input in a text field. Currently using onChange={onChange}, ...

reactjstypescriptnext.js

Assessing the invalidity of user-defined type guards within class implementations

I just wrote this Typescript code and tested it in a sandbox. Check out the code snippet below: class Foo { public get test() : string|number{ return "foo" } public hasString() : this is { test:string }{ return type ...

typescript

The Intersection of Material-UI, TypeScript, and Powerful Autocomplete Features

In my TypeScript project, I'm attempting to develop a Material-UI AutoComplete component that retrieves the input value based on an object's property name -> obj[key] However, when using the prop getOptionLabel, I encountered the following er ...

reactjstypescriptmaterial-uitypescript-generics

The text inside the Mapbox GL popup cannot be highlighted or copied

I'm encountering an issue where the text in my popups is unselectable. Even though I can close the popups through various methods, such as clicking on them, the pointer remains as a hand icon when hovering over the text and doesn't change to the ...

reactjstypescriptmapbox-gl-jsmapbox-glreact-map-gl

Transform Text into Numeric Value/Date or Null if Text is Invalid

Consider the TypeScript interface below: export interface Model { numberValue: number; dateValue: Date; } I have initialized instances of this interface by setting the properties to empty strings: let model1: Model = { numberValue: +'', ...

javascriptangulartypescriptangular8

What causes React JS to continuously render in an infinite loop when using hooks and useState

I am struggling with updating the current state of my component based on a result using a custom hook in React. Whenever I try to update it, I end up in an infinite loop rendering due to my usage of the useState() hook. I am still new to working with Rea ...

javascriptreactjstypescriptreact-hooks

Rect cannot be resized using mouse events

I am currently working on resizing the rectangle inside the SVG using mouse events. To achieve this, I have created another circle shape at the right bottom edge of the rectangle and implemented resize events on that shape. However, I'm facing an issu ...

javascriptreactjstypescriptsvgevent-handling

How to correct placeholder text display in the input of a Material UI text field

Currently, I am utilizing the material ui text field component. The issue at hand is that when the text field is in focus, the placeholder shifts to the top of the field. https://i.stack.imgur.com/P5flf.png I prefer for the placeholder to remain within ...

reactjstypescriptmaterial-uitextfield

The css values for component _nghost-c0 in an Angular application

Recently, I've been delving into Angular 5 and couldn't help but notice the peculiar html tags with ng generated attributes like _nghost-c0 and _nghost-c1... This got me wondering, what exactly do these attributes signify? [_nghost-c3] .employee ...

cssangularangular5

I am interested in creating a get and set method using the arrow function

Currently utilizing typescript 3.1.6. Is it possible to define get and set methods using arrow functions like this: export class foo { /* attributures ... */ /* constructor ... */ /* ---- Example ---- */ get bar = ():string => this.anAttributeToGe ...

typescript

What is the best way to retrieve HTML content using an Angular method?

Okay, so the title might not be the greatest...but I couldn't think of anything better: I want to emphasize search keywords in the result list...that's why I'm having trouble with this problem. CSS: .highlightText{ font-weight: bold; } In ...

angulartypescript

Executing a function within the same file is referred to as intra-file testing

I have two functions where one calls the other and the other returns a value, but I am struggling to get the test to work effectively. When using expect(x).toHaveBeenCalledWith(someParams);, it requires a spy to be used. However, I am unsure of how to spy ...

javascriptangulartypescripttestingkarma-runner

Encountering an issue with creating an App Runner on AWS CDK

Attempting to deploy my application using App Runner within AWS via CDK. Utilizing the reference from https://docs.aws.amazon.com/cdk/api/latest/docs/@aws-cdk_aws-apprunner.Service.html. Upon deployment, encountering the following error: create_failed: R ...

typescriptamazon-web-servicesaws-cdkamazon-app-runner

Exploring Angular's Implementation of D3 Force Simulation

Looking to incorporate a d3 force simulation in my Angular app. I have a run method that initializes and sets simulation options, as well as a ticked method that updates the simulation on each tick. However, I've encountered a few problems with this s ...

javascriptangulard3.js

Issue with migrating TypeOrm due to raw SQL statement

Is it possible to use a regular INSERT INTO statement with TypeOrm? I've tried various ways of formatting the string and quotes, but I'm running out of patience. await queryRunner.query('INSERT INTO "table"(column1,column2) VALUES ...

sqltypescriptpostgresqltypeorm

Using Angular to pass an index to a pipe function

Currently, I am attempting to incorporate the *ngFor index into my pipe in the following manner: <td *ngFor="let course of courses | matchesTime:time | matchesWeekday:i ; index as i">{{course.courseName}}</td> This is how my pipe is structure ...

javascriptangulartypescriptfilterpipe

having difficulty utilizing svg files in a react application

I'm having trouble with a SVG image. I initially tried importing it from a folder, but it appeared empty. Then, I attempted to directly specify the path, but that didn't solve the issue. The file name is image.svg <svg xmlns="http://www. ...

reactjssvgmaterial-ui

Tour Of Heroes offers a unique and versatile http create feature

I am currently making my way through the Tour of Heroes tutorial and finding it quite enjoyable. Everything is functioning properly, except for one aspect that has me puzzled - the http adding a hero feature. It seems to automatically know what id to ass ...

angularhttpangular-tour-of-heroes

A Guide to Filtering MongoDB Data Using Array Values

I am trying to extract specific data from a document in my collection that contains values stored in an array. { "name": "ABC", "details": [ {"color": "red", "price": 20000}, {" ...

javascriptangulartypescriptmongodbmean-stack

Error message: There appears to be a type error within the labelFunc of the KeyBoardDatePicker component in the Material-UI

I am currently working with a material-ui pickers component: <KeyboardDatePicker value={selectedDate} onChange={(_, newValue) => handleClick(newValue)} labelFunc={renderLabel} disableToolbar variant='inline' inputVariant=& ...

reactjstypescriptmaterial-ui