我想一个下拉阴影过滤器适用于特定的元素/路径内的内联通过CSS放置SVG,我并不需要整个图形被遮蔽,里面它只是一个元素.
.shadow {
fill: red;
-webkit-filter:
drop-shadow( 3px 3px 2px rgba(0,0,0,.7) );
filter:
drop-shadow( 3px 3px 2px rgba(0,0,0,.7) );
}
正如您在上面所看到的,我正在尝试将渐变阴影应用于SVG的红色圆圈元素,但它不起作用.
搜索我没有找到任何具体的信息,在其他SVG相关问题中只有少数评论只是声明它不适用于单个SVG元素,但没有太多解释.
UPDATE
正如@azeós在评论中指出的那样,它正在使用Firefox(v.43.0.2)正确呈现,因此这是Chrome特定的问题.无论如何,如果不按照评论中的建议使用SVG代码来制作这个交叉浏览器？
更新2018-03:我在这个问题上做了一些实验,因为我也找不到任何关于此的信息,结果非常不一致.TL; DR版本,如果您将使用polyfill或只是在SVG中做drophadow.
Codepen实验:http://codepen.io/staypuftman/pen/GoNoMq
Chrome和Edge Canary都不尊重filter或-webkit-filter在SVG对象的阴影环境中正确使用,但是在简单的方法上工作div.
看起来对SVG和HTML对象都很好.
Safari已经在10.1(可能是10.0)系列中解决了这个问题.
div由于某些原因,SVG CSS dropshadow不会显示,并且阴影的不透明度较低
没有.
京公网安备 11010802040832号 | 京ICP备19059560号-6 