使用 css3 的 SVG 投影

Question

是否可以使用 css3 为 svg 元素设置投影，比如

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

我看到一些关于使用滤镜效果创建阴影的评论。有没有单独使用css的例子。下面是一个工作代码，其中正确应用了 cusor 样式，但没有阴影效果。请帮助我用最少的代码获得阴影效果。

 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>

原文由 bsr 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

下面是使用“过滤器”属性将投影应用于某些 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)"/>

Box-shadow 被定义为适用于 CSS 框（阅读：矩形），而 svg 比矩形更具表现力。阅读 SVG 入门 以了解更多关于 SVG 滤镜可以做什么的信息。

原文由 Erik Dahlström 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

使用新的 CSS filter 属性。

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

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

你会像这样使用它：

 /* 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 过滤器的更多信息。

原文由 hitautodestruct 发布，翻译遵循 CC BY-SA 4.0 许可协议