Question

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

应用了<path>的{{1}}无法在Safari（我正在运行11.0.2）或Firefox（57.0.4）中呈现。

这是我的代码：

filter

应用 <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); } }的{{1}}会在Chrome中呈现。我删除对path的引用，filter显示所有已应用的css。

非常感谢任何帮助。

Answer 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>

<svg>使用Safari过滤问题

1 个答案: