<SVG> Safari 的过滤器问题答案

【问题标题】：<SVG> Filter issue with Safari<SVG> Safari 的过滤器问题
【发布时间】：2018-06-21 13:22:06
【问题描述】：

我已经四处寻找这个问题的先前答案，但我找到的解决方案都没有解决这个问题。

应用了filter 的我的<path> 无法在Safari（我运行的是11.0.2）或Firefox (57.0.4) 中呈现。

这是我的代码：

<!-- html -->
<svg viewBox="0 0 88 88" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
            <feGaussianBlur in="sourceAlpha" stdDeviation="2"/>
            <feComponentTransfer>
                <feFuncA type="linear" slope=".21"/>
            </feComponentTransfer>
            <feMerge>
                <feMergeNode in="coloredBlur"/>
                <feMergeNode in="SourceGraphic"/>
            </feMerge>
        </filter>
    </defs>
    <path d="M69.45584,18.54416a36,36,0,1,1-50.91168,0"/>
    <path d="M18.54416,18.54416a36,36,0,0,1,50.91168,0" filter="url(#glow)"/>
</svg>

/* css / scss */
path {
    fill: none;
    stroke-linecap: round;
    stroke-miterlimit: 10;
    @include rem(stroke-width, 8); // 8px

    @include pseudo(nth-of-type(unquote('2n+1'))) {
        stroke: rgba(38, 38, 38, .03)
    }

    @include pseudo(nth-of-type(unquote('2n'))) {
        stroke: rgb(0, 131, 202);
    }
}

这个path 应用了filter 在Chrome 中呈现。一旦我删除了对filter 的引用，path 就会显示所有应用的 CSS。

任何帮助将不胜感激。

【问题讨论】：

您正在尝试合并一个不存在的名为“coloredBlur”的过滤器原语。在这种情况下，浏览器应该使用之前的原始结果。铬显然是。也许 Safari 不是。只是一个猜测。
@PaulLeBeau：你是否建议我删除 <feMergeNode/> 并且它应该可以工作？因为这并没有解决问题。它还移除了 Chrome 的外发光。
没关系。我想我找到了真正的问题。看我的回答。

标签： firefox svg safari svg-filters

【解决方案1】：

没有sourceAlpha 这样的输入。正确的名字是SourceAlpha。

我目前无法在 Safari 上进行测试，但它解决了 Firefox 中的问题。

path {
  fill: none;
  stroke-linecap: round;
  stroke-miterlimit: 10;
  stroke-width: 8;
  stroke: rgba(38, 38, 38, .03);
  stroke: rgb(0, 131, 202);
}

path:nth-of-type(2n+1) {
  stroke: rgba(38, 38, 38, .03);
}

path:nth-of-type(2n) {
  stroke: rgb(0, 131, 202);
}

<svg viewBox="0 0 88 88" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
            <feGaussianBlur in="SourceAlpha" stdDeviation="2"/>
            <feComponentTransfer result="blur">
                <feFuncA type="linear" slope=".21"/>
            </feComponentTransfer>
             <feMerge>
                <feMergeNode in="blur"/>
                <feMergeNode in="SourceGraphic"/>
            </feMerge>
        </filter>
    </defs>
    <path d="M69.45584,18.54416a36,36,0,1,1-50.91168,0"/>
    <path d="M18.54416,18.54416a36,36,0,0,1,50.91168,0" filter="url(#glow)"/>
</svg>

【讨论】：

谢谢你。我看到我缺少<feComponentTransfer> 的result 属性。我唯一的问题是现在path #glow 是黑暗的？它与 Chrome 中的 stroke 的颜色相同。
我认为这一定是 Chrome 中的一个错误。在规范中，SourceAlpha 被定义为带有原始图形 alpha 的黑色输入。它不应该是蓝色的。你需要重新着色。看本题高分答案：stackoverflow.com/questions/7965196/svg-color-of-the-shadow
使用该解决方案，您将不需要当前使用的feComponentTransfer 步骤。
其实不是bug。 Chrome 正在遵循新的 SVG2 行为，即默认为 SourceGraphic 用于不存在的输入名称
谢谢@PaulLeBeau。我在投票率较低的答案中发现了一些有用的东西——我将<feGaussianBlur> 上的in 属性交换为SourceGraphic（请参阅我的建议编辑）。感谢你的帮助。信息量很大。