feComposite 忽略 feOffset 结果（Chrome 除外）答案

【问题标题】：feComposite ignores feOffset result (except in Chrome)feComposite 忽略 feOffset 结果（Chrome 除外）
【发布时间】：2017-09-26 02:50:29
【问题描述】：

我有一个非常简单的 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”，正如预期的那样。

为什么我不能在<feComposite> 中使用<feOffset> 输出，有推荐的替代方法吗？

【问题讨论】：

你试过用单位吗...dy="0.1px"
我刚才试过了，没有任何区别。此外，即使偏移量为 0，它仍然无法在 Safari 和 Firefox 中呈现。

标签： google-chrome firefox svg svg-filters

【解决方案1】：

这是一个简单的修复。 “out=”应该是过滤器中的“result=”。（并且您的字体大小需要在样式声明中（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>

【讨论】：