如何为 SVG 元素添加高亮显示？答案

【问题标题】：How do I add highlight to an SVG element?如何为 SVG 元素添加高亮显示？
【发布时间】：2016-11-03 10:06:57
【问题描述】：

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

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

【问题讨论】：

你可以重新着色你已经拥有的矩形。
我希望高光是相同的颜色 - 只是更亮。所以如果颜色是红色的——你如何使它变亮，记住颜色可以是任何东西——不仅仅是红色？像我用半透明的白色矩形一样覆盖它就可以做到这一点 - 但是是否可以在不向场景添加新矩形的情况下做到这一点？
可能不透明。或者应用过滤器。

【解决方案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>

【讨论】：

我有这个：但没有用。有错别字吗？
啊。亮度过滤器在 RGB 颜色空间中工作 - 所以如果你有一个纯红色，那就是它的亮度:) 但是你可以通过以下方式来增加亮度： values="1.2 0.2 0.2 0 0 0.2 1.2 0.2 0 0 0.2 0.2 1.2 0 0 0 0 0 1 0"