首页 文章

仅应用SVG过滤器“填充”

提问于
浏览 次
1

How do I apply an SVG filter on an SVG element, but not on its stroke?

假设我有这个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>

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

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

Is there a way to apply the filter only on the filled part on a shape, and not on its stroke?

svg stroke svg-filters

1 回答

  • 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>
    回复于

相关问题