使用 css3 的 SVG 投影

使用 new CSS filter 属性。

Supported by webkit browsers、Firefox 34+ 和 Edge。

您可以使用支持 FF < 的 polyfill 34、IE6+。

你会像这样使用它：

/* 仅在支持时使用 -webkit-：Chrome < 54, iOS < 9.3, Android < 4.4.4 */ .shadow { -webkit-filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7 ));过滤器：阴影（3px 3px 2px rgba(0, 0, 0, .7)); /* 类似于 box-shadow 的语法 */ }

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

请注意：这种方法仅适用于将类单独放在 <svg> 元素上的情况。您可以不在 <rect> 等内联 svg 元素上使用它。

<!-- This will NOT work! -->
<svg><rect class="shadow" ... /></svg>

在 html5rocks 上阅读有关 CSS 过滤器的更多信息。

---

这是使用“过滤器”属性将阴影应用于某些 svg 的example。如果您想控制阴影的不透明度，请查看 this example。 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 Primer，详细了解您可以使用 SVG 过滤器做什么。

---

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

img.light-shadow{ filter: drop-shadow(0px 3px 3px rgba(0, 0, 0, 0.4)); } img.dark-shadow{ 滤镜：drop-shadow(0px 3px 3px rgba(0, 0, 0, 1)); }

---

我发现最简单的方法是使用 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)"/>

---

带有白色阴影的黑色文本

另一种方式，我用于白色阴影（在文本上）：为阴影创建一个克隆：

注意：这需要在 SVG 声明中使用 xmlns:xlink="http://www.w3.org/1999/xlink"。

实际文本值位于 <defs> 部分，具有位置和样式，但没有 fill 定义。

文本被克隆了两次：第一次用于阴影，第二次用于文本本身。

较远的阴影，最大值为模糊偏差：

您可以对常规 SVG 对象使用相同的方法。

具有相同要求：<defs> 部分没有填充定义！

---

可能是一种演变，内联 CSS 过滤器似乎以某种方式很好地处理元素。

如前所述，在类或内联中的 svg 元素中声明阴影 css 过滤器不起作用。

但是，至少在 Firefox 中，具有以下魔法：

在 DOM 加载后使用 javascript 内联附加过滤器声明。

// 不起作用，使用常规的动态 css 样式： shadow0.oninput = () => { rect1.style.filter = "filter:drop-shadow(0 0 " + shadow0.value + "rem black);" } // 好的！内联样式，附加。 shadow1.oninput = () => { rect1.style += " ;filter:drop-shadow(0 0 " + shadow1.value + "rem black);" rect2.style += " ;filter:drop-shadow(0 0 " + shadow1.value + "rem black);" }

仅限火狐

不工作！ |好的！

https://i.stack.imgur.com/3RLDH.gif

---

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

---

我不知道只有 CSS 的解决方案。

正如您所提到的，过滤器是在 SVG 中创建投影效果的规范方法。 SVG 规范包括一个这样的例子。

---