SVG阴影使用css3
是否有可能使用css3为svg元素设置阴影，如
box-shadow: -5px -5px 5px #888; -webkit-box-shadow: -5px -5px 5px #888; 我看到一些关于使用滤镜效果创build阴影的评论。 有没有单独使用CSS的例子。 下面是一个工作代码，正确应用cusor风格，但没有阴影效果。 请帮我用最less的代码获得阴影效果。
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE HTML><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <style type="text/css" media="screen"> svg .shadow { cursor:crosshair; -moz-box-shadow: -5px -5px 5px #888; -webkit-box-shadow: -5px -5px 5px #888; box-shadow: -5px -5px 5px #888; } </style> </head> <body> <meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" /> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" viewBox="0 0 120 70"> <rect class="shadow" x="10" y="10" width="100" height="50" fill="#c66" /> </svg> </body> </html>
这是一个使用“filter”属性将色阴影应用于某些svg的示例 。 如果你想控制阴影的不透明度，请看这个例子 。 slope属性控制给阴影多less不透明度。
示例中的相关位
<filter id="dropshadow" height="130%"> <feGaussianBlur in="SourceAlpha" stdDeviation="3"/> <!-- stdDeviation is how much to blur --> <feOffset dx="2" dy="2" result="offsetblur"/> <!-- how much to offset --> <feComponentTransfer> <feFuncA type="linear" slope="0.5"/> <!-- slope is the opacity of the shadow --> </feComponentTransfer> <feMerge> <feMergeNode/> <!-- this contains the offset blurred image --> <feMergeNode in="SourceGraphic"/> <!-- this contains the element that the filter is applied to --> </feMerge> </filter> <circle r="10" style="filter:url(#dropshadow)"/>
盒子阴影被定义为在CSS盒上工作（读取：矩形），而SVG比矩形performance得更有performance力。 阅读SVG入门手册 ，了解更多有关SVGfilter的function。
使用新的CSS filter属性。
由webkit浏览器 ，Firefox 34 +和Edge支持 。
你可以使用这个支持FF <34，IE6 +的polyfill。
你会像这样使用它：
.shadow { /* Use -webkit- only if supporting: Chrome < 54, iOS < 9.3, Android < 4.4.4 */ -webkit-filter: drop-shadow( -5px -5px 5px #000 ); filter: drop-shadow( -5px -5px 5px #000 ); }
而你的html会是：
<img src="my-svg-graphic.svg" class="shadow"> <!-- Or --> <svg class="shadow" ... > <rect x="10" y="10" width="100" height="50" fill="#c66" /> </svg>
这种方法不同于box-shadow效果，因为它占了不透明性，不会将阴影效果应用到盒子，而是应用到svg元素本身的angular落。
你可以在这里看到一个实例 。
请注意 ：这种方法只适用于单独放置<svg>元素的类。 你不能在内联的svg元素（比如<rect> 。
<!-- This will NOT work! --> <svg><rect class="shadow" ... /></svg>
阅读更多关于html5rocks的 CSSfilter。
所以，正如Lorenzo Polidori接受的答案的埋葬评论中所提到的那样，Chrome中最适合我的选项（我相信其他的Webkit浏览器）是：
-webkit-svg-shadow: 0 0 7px #53BE12;
我不知道一个纯CSS的解决scheme。
正如您所提到的，filter是在SVG中创build阴影效果的规范方法。 SVG规范包含了一个例子： http : //www.w3.org/TR/SVG/filters.html#AnExample
