将SVG过滤器应用于SVG的PART

Question

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

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