Safari中的SVG滤镜:未应用x、y、width、height
Safari中的SVG滤镜:未应用x、y、width、height
提问于 2018-06-07 00:11:53
问题：
- 在Safari中，两个滤镜都会显示出来-但都是矩形的全宽/全高，所以只有最上面的一个是可见的。
我如何让它在不同的浏览器上一致地工作？
bug的演示：https://codepen.io/mknepprath/pen/mKeObo。在Chrome或Firefox中打开以查看其外观。谢谢!
html：
<svg class='a'>
<defs>
<filter id='hey'>
<feColorMatrix
type='matrix'
result='darken'
values='.2 .05 .05 0 .35
.05 .2 .05 0 .35
.05 .05 .2 0 .35
0 0 0 1 0'
/>
<feColorMatrix
in='SourceGraphic'
result='node'
x='5'
y='5'
width='90'
height='90'
/>
<feMerge>
<feMergeNode in='darken' />
<feMergeNode in='node' />
</feMerge>
</filter>
</defs>
</svg>
<div class='b' style='filter: url(#hey)'></div>css：
.a {
position: absolute;
top: 0;
left: 0;
visibility: hidden;
}
.b {
width: 200px;
height: 100px;
background: peachpuff;
}Chrome和Firefox：
Safari：
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-06-08 04:12:28
当您使用CSS过滤器陷门将SVG过滤器应用于HTML内容时，许多过滤器功能在Safari上不起作用。看起来你又找到了一个这样的案例。如果你想继续使用过滤器，完全可以在SVG中完成。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50724987
复制相关文章
相似问题