Question

我有一个非常简单的SVG过滤器，在Chrome与Safari或Firefox（Mac OS）上产生完全不同的结果。问题似乎集中在偏移alpha通道上使用feComposite。这是我的代码：

<svg xmlns="http://www.w3.org/2000/svg" width="400px" height="400px" viewBox="-1 -1 2 2">
  <defs>
    <filter id="foo">
      <feFlood flood-color="red" result="red-fill" />
      <feOffset dx="0" dy="0.1" in="SourceAlpha" out="offset-text" />
      <feComposite operator="in" in="red-fill" in2="offset-text" result="final" />
    </filter>
  </defs>
  <text font-size="1px" filter="url(#foo)">1</text>
</svg>

在Chrome中，我看到一个大的红色数字“1”，而Safari和Firefox只显示一个空白的白色画布。如果我删除<feOffset>并直接使用SourceAlpha进行合成，请执行以下操作：

<svg xmlns="http://www.w3.org/2000/svg" width="400px" height="400px" viewBox="-1 -1 2 2">
  <defs>
    <filter id="foo">
      <feFlood flood-color="red" result="red-fill" />
      <feComposite operator="in" in="red-fill" in2="SourceAlpha" result="final" />
    </filter>
  </defs>
  <text font-size="1px" filter="url(#foo)">1</text>
</svg>

...然后我按照预期在所有三个浏览器中看到红色数字“1”。

为什么我无法使用<feOffset>中的<feComposite>输出，是否有推荐的替代方案？

Answer 1

这是一个简单的解决方法。那＆＃34; out =＆＃34;应该是＆＃34;结果=＆＃34;在你的过滤器中。（而且你的字体大小需要在样式声明中（Chrome更容易理解错误的语法。）

<svg xmlns="http://www.w3.org/2000/svg" width="400px" height="400px" viewBox="-1 -1 2 2" >

<filter id="foo">
  <feFlood flood-color="red" result="red-fill" />
  <feOffset dx="0" dy="0.1" in="SourceAlpha" result="offset-text" />
  <feComposite operator="in" in="red-fill" in2="offset-text" result="final" 
   />
 </filter>
 </defs>
 <text filter="url(#foo)" style="font-size:1px" >1</text>
 </svg>

feComposite会忽略feOffset结果（Chrome除外）

1 个答案: