如何使用CSS在svg元素上应用阴影效果? [英] How to apply shadow effect on svg elements using css?
本文介绍了如何使用CSS在svg元素上应用阴影效果?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
要求对svg的各种元素(例如路径，矩形等)具有阴影效果.
我已经尝试使用svg中已提供的过滤器对此进行了尝试，但是并非所有浏览器都支持.
因此，我希望使用CSS完成此操作，因为我已经尝试过了，但是却无法正常工作
It is required to have shadow effect on various elements of svg like path, rect, etc.
I have tried this using filters that already given in svg , but that is not supported in all browser.
So i want it to be done using css, as i have tried this but its not woking
<html>
<head>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<style type="text/css"><![CDATA[
rect {
fill: red;
stroke: blue;
box-shadow: 6px 4px 10px 10px #888888;
stroke-width: 3
}
</style>
</defs>
<rect x="40" y="40" rx="25" ry="50" width="150" height="100"/>
</svg>
</body>
</html>
任何建议都是非常可取的，
在此先感谢...:)
Any suggestions will be realy appreciable,
Thanks in advance...:)
推荐答案
根据我刚刚在stackOverflow上读取的一个线程(
According to a thread I just read at stackOverflow (http://stackoverflow.com/questions/6088409/svg-drop-shadow-using-css3[^]) You can''t do this with a box-shadow.
Looks like the (unavoidable) way to go is (a) filters or (b) non-vector images for those misbehaving browsers.
I''m still covering the whole svg and css idea, though from the little I''ve looked at, I''m yet to recal a css property that works for both html and svg. Take for instance the padding and margin attributes. Fine for html, no effect (chrome 19) for svg. Or take fill and stroke. Fine for svg, no effect in html.
No doubt(?), there are some properties that work for both. So far I''m tending towards the view that the syntax and use is similar for html and svg css, while the remainder of the ins and outs aren''t.
这篇关于如何使用CSS在svg元素上应用阴影效果?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
