仅应用SVG过滤器“填充”

时间:2014-05-16 20:14:44

标签: svg stroke svg-filters

如何在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>

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

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

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

1 个答案:

答案 0 :(得分: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>