我曾四处寻找这个问题的答案，但我找到的解决方案都不能解决问题。
我应用了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); } }这个应用了filter path在Chrome中呈现。 一旦我删除了filter的引用，就会显示出所有应用的CSS。
任何援助将不胜感激。
I have looked around for a previous answer to this issue, but none of the solutions I have found resolve the issue.
My <path> with a filter applied to it doesn't render in Safari (I'm running 11.0.2) or Firefox (57.0.4).
Here is my code:
<!-- 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); } }This path with the filter applied to it renders in Chrome. As soon as I remove the reference to the filter the path shows up with all css applied.
Any assistance would be much appreciated.
最满意答案
没有像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>
There is no such input as sourceAlpha. The correct name is SourceAlpha.
I can't currently test on Safari, but it fixes the problem in 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>
更多推荐
发布评论