1

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

4

1 回答 1

2

是的。您可以使用 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/

于 2013-01-18T17:39:13.453 回答