使用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; 
}	

Answer 1

使用新的 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>

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

请注意:此方法仅在将类放在<svg>元素上时才有效.你可以不是一个内联SVG元素上使用这个功能,比如<rect>.

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

阅读有关html5rocks上的css过滤器的更多信息.

Answer 2

这是使用'filter'属性将dropshadow应用到某个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过滤器的功能.

Answer 3

使用drop-shadow（）CSS函数和rgba颜色值，可以轻松地向svg-element中添加一个阴影效果。通过使用rgba颜色值，您可以更改阴影的不透明度。

img.light-shadow{
  filter: drop-shadow(0px 3px 3px rgba(0, 0, 0, 0.4));
}

img.dark-shadow{
  filter: drop-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" />

Answer 4

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