可能是一种进化，看起来内联css过滤器在元素上工作得很好，在某种程度上。

如前所述，在svg元素中，在类中或内联中声明投影css过滤器是无效的。

但是，至少在Firefox中，使用以下魔法:

在DOM加载后，用javascript内联添加过滤器声明。

// Does not works, with regular dynamic css styling: shadow0.oninput = () => { rect1.style.filter = "filter:drop-shadow(0 0 " + shadow0.value + "rem black);" } // Okay! Inline styling, appending. shadow1.oninput = () => { rect1.style += " ;filter:drop-shadow(0 0 " + shadow1.value + "rem black);" rect2.style += " ;filter:drop-shadow(0 0 " + shadow1.value + "rem black);" } <h2>Firefox only</h2> <h4> Does not works! <input id="shadow0" type="number" min="0" max="100" step="0.1"> | Okay! <input id="shadow1" type="number" min="0" max="100" step="0.1"> <svg viewBox="0 0 120 70"> <rect id="rect1" x="10" y="10" width="100" height="50" fill="#c66" /> <!-- Inline style declaration does NOT works at svg level, no shadow at loading: --> <rect id="rect2" x="40" y="30" width="10" height="10" fill="#aaa" style="filter:drop-shadow(0 0 20rem black)" /> </svg>

使用新的CSS过滤器属性。

webkit浏览器、Firefox 34+、Edge支持。

您可以使用这种聚合物，将支持FF < 34, IE6+。

你可以这样使用它:

/* Use -webkit- only if supporting: Chrome < 54, iOS < 9.3, Android < 4.4.4 */ .shadow { -webkit-filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7)); filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7)); /* Similar syntax to box-shadow */ } <img src="https://upload.wikimedia.org/wikipedia/commons/c/ce/Star_wars2.svg" alt="" class="shadow" width="200"> <!-- Or --> <svg class="shadow" ...> <rect x="10" y="10" width="200" height="100" fill="#bada55" /> </svg> <!-- Or --> <svg> <g fill="none" stroke="#decade" stroke-width="2" transform="scale(2)"> <circle class="shadow" cx="20" cy="20" r="19"/> <path class="shadow" d="M 20,1 V 39"/> <path class="shadow" d="M 20,1 V 20" transform="rotate(135, 20, 20)"/> <path class="shadow" d="M 20,1 V 20" transform="rotate(225, 20, 20)"/> </g> </svg>

这种方法与css的box-shadow效果不同，因为它考虑了不透明度，并且没有将阴影效果应用到框上，而是应用到svg元素本身的轮廓上。

注意:这种方法过去只在类单独放在<svg>元素上时有效。您现在可以在内联svg元素上使用它，例如<rect>。

在html5rocks上阅读更多关于css过滤器的内容。

如果您的SVG元素是<text>，您可以毫无问题地使用CSS属性text-shadow。语法是text-shadow: color x-offset-px y-offset-px blur-px。

您可以使用drop-shadow() CSS函数和rgba颜色值轻松地为svg元素添加投影效果。通过使用rgba颜色值，你可以改变你的阴影的不透明度。

img.light-shadow { 滤镜:投影(0px 3px 3px rgba(0,0,0,0.4)); ｝ img.dark-shadow { 滤镜:投影(0px 3px 3px rgba(0,0,0,1)); ｝ <img class="light-shadow" src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.svg" /> <img class="dark-shadow" src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.svg" />

下面是一个使用'filter'属性为svg应用dropshadow的例子。如果你想控制投影的不透明度，看看这个例子。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)"/>

Box-shadow被定义为用于CSS框(阅读:矩形)，而svg比矩形更有表现力。阅读SVG入门教程，了解更多关于SVG过滤器的功能。

我发现最简单的方法是feDropShadow。

<filter id="shadow" x="0" y="0" width="200%" height="200%">
  <feDropShadow dx="3" dy="3" stdDeviation="1" flood-color="#ff0000" flood-opacity="1" />
</filter>

关于元素:

<path d="..." filter="url(#shadow)"/>