如何为SVG元素添加突出显示？

Question

假设在SVG元素中有一个rect。完成。我可以添加另一个位于其顶部的矩形，颜色为rgba（255,255,255,0.7）以突出显示它。

是否可以在不添加第二个SVG rect元素的情况下突出显示rect？也许使用CSS过滤器：？

Answer 1

CSS过滤器不能可靠地影响SVG父级的子元素。您必须使用JavaScript动态添加SVG过滤器。这是一个亮度滤镜。

<filter id="brighter">
  <feColorMatrix type="matrix" values="1.2 0 0 0 0 
                                       0 1.2 0 0 0
                                       0 0 1.2 0 0 
                                       0 0 0 1 0"/>
</filter>