SVG & Angular2+根据背景改变元素的颜色

Question

我在一个svg元素中的两个rect元素之后有一个text元素。

<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>

rect中的rect小于text元素。我想要更改text元素的颜色，前提是text位于第一个rect元素的外部和绿色rect的前面。

我该怎么做呢？

谢谢你的努力。

这个问题是以类似的方式提出的，但没有适当的代码示例：Change SVG color based on current background

Answer 1

请添加一些类并更改css文件，如下所示：

<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; }

    /* Обратите внимание, что цвет текста задается с помощью        *
     * fill свойства, а свойство color используется только для 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>

你也可以在这里查看：https://developer.mozilla.org/ru/docs/Web/SVG/%D0%AD%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82/%3Ctext%3E

希望它能帮上忙！

Answer 2

https://developer.mozilla.org/de/docs/Web/CSS/mix-blend-mode也可以在SVG中工作。

text {
   mix-blend-mode: difference;
}