如何使用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上读取的一个线程( ^ ])您不能使用盒子阴影来做到这一点.

看起来(不可避免)的方法是(a)过滤器或(b)对于那些行为异常的浏览器的非矢量图像.

我仍然涵盖了整个svg和css的想法，尽管从我看过的内容来看，我还没有确定可同时用于html和svg的css属性.以padding和margin属性为例.对于html来说很好，对svg则没有效果(chrome 19).或进行填充和描边.对于svg很好，在html中无效.

毫无疑问(?)，有一些属性对两者都适用.到目前为止，我倾向于这样一种观点，即html和svg css的语法和用法是相似的，而其余的内容并没有.

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元素上应用阴影效果?

相关推荐