通过 CSS 将 Box Shadow 添加到 SVG 的问题答案

【问题标题】：Issue on adding Box Shadow to SVG by CSS通过 CSS 将 Box Shadow 添加到 SVG 的问题
【发布时间】：2014-03-21 15:00:13
【问题描述】：

您能看看this demo 并告诉我如何使用 CSS 将盒子阴影添加到 svg 吗？

我已经试过了

.kiwi {
  fill: #94d31b; 
  box-shadow: 10px 10px 5px #888888;
  -webkit-filter: drop-shadow( -5px -5px 5px #000 );
  filter: drop-shadow( -5px -5px 5px #000 ); 
  -webkit-svg-shadow: 0 0 7px #53BE12;
}

但他们没有为 SVG 添加任何阴影

【问题讨论】：

-webkit-filter 将工作（Chrome），但对于完整的 SVG。例如：如果它被应用于 #Layer_1 例如。将您的猕猴桃单独放在单独的 SVG 中可能是一种解决方案。
类似这样的东西（不是答案 - 只是一个起点）：jsfiddle.net/helderdarocha/Qc3ds/3
@helderdarocha - 这仅适用于 chrome，而我的答案似乎适用于所有最新的浏览器
@helderdarocha 的评论有一个非常重要的细节：但对于完整的 SVG。因此，您必须仅在 svg 元素上设置过滤器。

标签： svg css drop-shadow

【解决方案1】：

您可以在 svg 中添加如下内容：

<filter id="drop-shadow">
  <feGaussianBlur in="SourceAlpha" stdDeviation="2.2"/>
  <feOffset dx="1" dy="4" result="offsetblur"/>
  <feFlood flood-color="rgba(0,0,0,0.3)"/>
  <feComposite in2="offsetblur" operator="in"/>
  <feMerge>
    <feMergeNode/>
    <feMergeNode in="SourceGraphic"/>
  </feMerge>
</filter>

然后使用以下样式：

.kiwi {
  fill: #94d31b; 
  -webkit-filter: drop-shadow(0 1px 10px rgba(113,158,206,0.8));
  filter: url(#drop-shadow);
}

Example

【讨论】：

谢谢皮特 -------------！，