使用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 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过滤器可以做什么的知识。