使用CSS 3的SVG丢弃阴影

Question

使用CSS 3的SVG丢弃阴影

是否可以使用CSS 3为SVG元素设置拖放阴影，例如

box-shadow: -5px -5px 5px #888;

-webkit-box-shadow: -5px -5px 5px #888;

我看到了一些关于使用过滤器效果创建阴影的注释。是否有单独使用CSS的例子。下面是正确应用缓冲样式的工作代码，但没有阴影效果。请帮助我得到阴影效果，至少一点代码。

svg .shadow { 

  cursor:crosshair; 

  -moz-box-shadow: -5px -5px 5px #888;

  -webkit-box-shadow: -5px -5px 5px #888;

  box-shadow: -5px -5px 5px #888; 

} 

<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>

Answer 1

这是一个例使用“Filter”属性将下拉阴影应用于某些SVG。如果要控制阴影的不透明度，请查看这个例子..这个slope属性控制向下拉阴影提供多少不透明度。示例中的相关双边投资条约：<filter&nbsp;id="dropshadow"&nbsp;height="130%"> &nbsp;&nbsp;<feGaussianBlur&nbsp;in="SourceAlpha"&nbsp;stdDeviation="3"/>&nbsp;<!--&nbsp;stdDeviation&nbsp;is&nbsp;how&nbsp;much&nbsp;to&nbsp;blur&nbsp;--> &nbsp;&nbsp;<feOffset&nbsp;dx="2"&nbsp;dy="2"&nbsp;result="offsetblur"/>&nbsp;<!--&nbsp;how&nbsp;much&nbsp;to&nbsp;offset&nbsp;--> &nbsp;&nbsp;<feComponentTransfer> &nbsp;&nbsp;&nbsp;&nbsp;<feFuncA&nbsp;type="linear"&nbsp;slope="0.5"/>&nbsp;<!--&nbsp;slope&nbsp;is&nbsp;the&nbsp;opacity&nbsp;of&nbsp;the&nbsp;shadow&nbsp;--> &nbsp;&nbsp;</feComponentTransfer> &nbsp;&nbsp;<feMerge>&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;<feMergeNode/>&nbsp;<!--&nbsp;this&nbsp;contains&nbsp;the&nbsp;offset&nbsp;blurred&nbsp;image&nbsp;--> &nbsp;&nbsp;&nbsp;&nbsp;<feMergeNode&nbsp;in="SourceGraphic"/>&nbsp;<!--&nbsp;this&nbsp;contains&nbsp;the&nbsp;element&nbsp;that&nbsp;the&nbsp;filter&nbsp;is&nbsp;applied&nbsp;to&nbsp;--> &nbsp;&nbsp;</feMerge></filter><circle&nbsp;r="10"&nbsp;style="filter:url(#dropshadow)"/>框-阴影被定义为在CSS框(读：矩形)上工作，而SVG比矩形更有表现力。阅读SVG底漆了解更多关于SVG过滤器可以做什么的知识。