仅将 SVG 过滤器应用于“填充”

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>