SVG使用css3拖放阴影
是否可以使用css3为svg元素设置阴影，如
box-shadow: -5px -5px 5px #888;
-webkit-box-shadow: -5px -5px 5px #888;
我看到了一些关于使用滤镜效果创建阴影的评论。 有没有一个单独使用CSS的例子。 下面是一个工作代码，其中cusor风格正确应用，但没有阴影效果。 请帮助我用最少的代码获得阴影效果。
<?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属性控制给阴影多少不透明度。
示例中的相关位：
<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比矩形表现得更有表现力。 阅读SVG入门知识，了解更多关于SVG过滤器可以做什么的信息。
使用新的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元素本身的角落。
你可以在这里看到一个生动的例子。
请注意 ：这种方法仅适用于仅将类放在<svg>元素上的情况。 不能将联SVG元件上使用此如<rect> 。
<!-- This will NOT work! -->
<svg><rect class="shadow" ... /></svg>
阅读更多关于html5rocks的CSS过滤器。
因此，正如Lorenzo Polidori接受的答案的埋葬评论中所提到的那样，Chrome中最适合我的选项（我确信其他Webkit浏览器）是：
-webkit-svg-shadow: 0 0 7px #53BE12;