将 SVG 过滤器应用于 SVG 的一部分答案

【问题标题】：Apply SVG filter to PART of the SVG将 SVG 过滤器应用于 SVG 的一部分
【发布时间】：2013-01-02 10:29:14
【问题描述】：

这可能吗？我有一个 svg，我想用一个透明矩形覆盖该 svg 的部分。是否可以让被覆盖的 SVG 部分改变颜色或发光等？

【问题讨论】：

【解决方案1】：

是的。您可以使用 feComposite "in" 提取重叠区域，对其应用效果，然后将结果重新合成到原始图形的顶部。如果您有可变的不透明度，事情会变得更加复杂，但概念是相同的。用您的 SVG 发布一个小提琴，我会为您编写过滤器。

更新：

这是你的做法：

   <filter id="greenify">

        <feFlood flood-color="#ff0770" flood-opacity="1" x="50" y="30" height="40" width="260" result="A"/> 
        <feComposite operator="in" in2="SourceGraphic" in="A" result="B"/>
        <feColorMatrix type="hueRotate" in="B" result="C" 
            values ="90" /> 
        <feComposite operator="over" in2="SourceGraphic" in="C"/>

   </filter>

第一个 feFlood 为您创建一个颜色矩形。然后 feComposite 提取重叠区域。 feColorMatrix 改变了它的颜色（所以你知道它不是结果中的原始矩形），然后 feComposite 将新的绿色区域覆盖在原始 SourceGraphic 的顶部。

http://jsfiddle.net/jsfmullany/Jys7a/1/

【讨论】：

您可以在这里找到小提琴：jsfiddle.net/Jys7a 就像测试用例一样，假设我们要突出显示头部？我会努力同时学习：D
你是最棒的 - 这很好用，可以乱用它来达到我想要的效果。