Question

如何在SVG元素上应用SVG过滤器，而不是在中风上？

假设我有这个SVG过滤器（它将红色组件置于100％）：

<filter id="testStroke">
<feComponentTransfer>
<feFuncR type="linear" slope="0" intercept="1"/>
</feComponentTransfer>
</filter>

如果我在该文本节点上应用此过滤器：

<text x="450" y="210" fill="black" stroke="blue" filter="url('#testStroke')">
Result
</text>

然后填充的部分（原来是黑色）变成红色（因为过滤器），蓝色的笔划变成紫色（同样的原因）。我希望笔划保持蓝色（不过滤），但填充变为红色（过滤）。

我不是在寻找“不要抚摸形状，在其上应用过滤器并创建该形状的克隆以应用笔划”。

有没有办法仅在形状上的填充部分上应用滤镜，而不是在中风上？

Answer 1

没有配置或属性可以直接选择填充，但您可以使用“绿屏”技术选择笔划，过滤填充然后重新应用笔划。你必须提前知道笔画的颜色和填充，这是一个缺点（因为在Chrome / Safari中不支持这样做的伪输入（尽管它们在Firefox和IE10中））。所以这是一个有效的例子：

    <filter id="testStroke">
       <feComponentTransfer in="SourceGraphic" result="recolored">
           <feFuncR type="linear" slope="0" intercept="1"/>
       </feComponentTransfer>

 <!-- We're using the fact that the black fill has zero luminance to create a selection mask for the stroke -->
       <feColorMatrix in="SourceGraphic" type="luminanceToAlpha" result="lumMask"/>
        <feComponentTransfer in="lumMask" result="lumMaskCeil">
 <!-- a blue fill doesn't have a high luminance, so we're going to dial it way up using a gamma transform with a high exponent-->
           <feFuncA type="gamma" exponent=".01"/>
        </feComponentTransfer>

 <!-- this selects just the part of the input image that overlaps with our stroke mask-->
     <feComposite operator="in" in="SourceGraphic" in2="lumMaskCeil" result="stroke"/>

 <!-- and composite it over our recolored content from the original filter-->

  <feComposite operator="over" in="stroke" in2="recolored"/>    
</filter>

仅应用SVG过滤器“填充”

1 个答案: