Html 使用css3的SVG投影

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

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

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

svg.shadow{
光标：十字线；
-莫兹盒阴影：-5px-5px 5px#888；
-网络工具包盒阴影：-5px-5px 5px#888；
盒影：-5px-5px 5px#888；
}

---

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

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

下面是一个使用“filter”属性将dropshadow应用于某些SVG的示例。如果要控制dropshadow的不透明度，请查看。

slope

属性控制要为dropshadow提供多少不透明度

示例中的相关位：

<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过滤器的更多操作。

使用新的CSS属性

、Firefox 34+和

您可以使用它来支持FF<34，IE6+

您可以这样使用它：

/*仅当支持：Chrome<54、iOS<9.3、Android<4.4.4时使用-webkit*/
.影子{
-webkit过滤器：放置阴影（3p3p2pRGBA（0,0,0,7））；
过滤器：投影（3p3p2pRGBA（0,0,0,7））；
/*类似于框阴影的语法*/
}

---

我找到的最简单的方法是使用feDropShadow

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

关于要素：

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

带白色阴影的黑色文本 另一种方法，我使用白色阴影（在文本上）：为阴影创建克隆：

注意：这需要

xmlns:xlink=”http://www.w3.org/1999/xlink“

在SVG声明中

实文本值位于

部分，具有位置和样式，但没有

填充定义

文本被克隆两次：第一次克隆阴影，第二次克隆文本本身



带白色阴影的黑色文本
可能是一种演变，似乎内联css过滤器在元素上以某种方式工作得很好

如前所述，在svg元素中，在类或内联中声明drop shadow css过滤器不会起作用

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

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


//不起作用，使用常规动态css样式：
shadow0.oninput=（）=>{
rect1.style.filter=“过滤器：放置阴影（0 0”+阴影0.value+“rem黑色”）
}
//好的！内联样式，附加。
shadow1.oninput=（）=>{
rect1.style+=“过滤器：放置阴影（0 0”+阴影1.value+“rem黑色”）
rect2.style+=“过滤器：放置阴影（0 0”+阴影1.value+“rem黑色”）
}
仅限Firefox
不行！
|好的！
您可以使用drop-shadow（）CSS函数和rgba颜色值轻松地向svg元素添加阴影效果。通过使用rgba颜色值，可以更改阴影的不透明度


img.light-shadow{
过滤器：投影（0px 3px 3px rgba（0,0,0,0.4））；
}
暗影{
过滤器：投影（0px 3px 3px rgba（0,0,0,1））；
}

如果SVG元素是
，则可以毫无问题地使用CSS属性
文本阴影。语法是
text shadow:color x-offset-px y-offset-px blur px
有没有办法控制dropshadow的不透明度？@HughGuiney:当然有。这里有一个这样做的例子。只需改变
斜率
属性，调整所需的不透明度。@LorenzoPolidori IE10和Safari 5.2都支持SVG过滤器。有关如何在D3.js中实现此方法的示例：@Costa请参见例如
-webkit filter:drop-shadow（）
。如果您想让它只在webkit中工作，请参阅@hitautomdestruct@clayzermk1的答案。。。。然后是的。我认为，我们正在寻找一个更为可靠的解决方案，我认为这也不再受支持。@jbeard4链接已断，最好将内容粘贴到此处。提交的链接指向
已删除：过滤效果本章不再是SVG规范的一部分
！！这不是答案。这似乎适用于图像或整个svg，但适用于svg内部的选择。这不适用于以任何方式将阴影应用于svg元素。不要使用它。失败的例子：@AndyRay就像一个符咒。您将类放在标记上。@hitsautodestruct是的，它确实是这样工作的。真正的问题是，你需要对一个元素应用过滤器，而不是其他元素。我想@AndyRay和hitautodestruct都是正确的，因为，这看起来像是一个Chrome渲染问题：Firefox在SVG特定元素上正确地渲染了过滤器。我读了一些书，现在我明白了你的答案，你肯定得到了支持。这个答案没有得到足够的赞赏。不过，再多解释一下就好了。例如，此示例：要使其起作用，您需要将
过滤器：url（#shadow）
添加到您想要有阴影的元素中（
#shadow
是
过滤器
标记的id）。例如
。也许你应该把它添加到你的答案中。在
feDropShadow dx=“40”dy=“40”stdDeviation=“35”
中使用较小的值，例如在40,40,35上使用3,3,1，可能会避免一些混淆。@Foxhoundn这绝对是现代的解决方案，应该被接受为答案。Internet Explorer 11:失败（无阴影，但原始SVG图像为sho