How do I make the font color changeable when overlaying letters on an svg shape?

  • 0
    Good people help with good advice, googled the problem as usual but did not find answers, the fact is that it is impossible to implement the idea .. we have a page block on which the svg figure is located, a block with employees is placed on top of it, the block changes the position of the blocks differently when the window is resized in relation to the svg figure, so a problem arises that the font color of the team-corporation & gt; team-coop & gt; p block changes to white when hitting a red figure, and red when it does not hit the figure.

    Codepad code

    Google went to the option with the use of the CSS property mix-blend-mode, changed the structure of the blocks because the necessary block in this structure cannot apply this property due to heredity of the distant, but not the point ... when applying the property, it is impossible to change to specific colors, which is not works for me ... Can anyone come across such a problem? maybe there is a solution using js

    JavaScript Michael Hogan, Jan 29, 2019

  • 3 Answers
  • 0
    Jude Zhang

  • 0
    Either mix-blend-mode

    either with duplicate content (in my markup, but you can also use pseudo and data)

    Alexandra Rangel

  • 0

Your Answer
To place the code, please use CodePen or similar tool. Thanks you!