html - 使用 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>

Answer 1

使用新 CSS filter 属性(property)。

Supported by webkit browsers , Firefox 34+ 和 Edge .

您可以使用这个 polyfill将支持 FF < 34、IE6+。

你会像这样使用它:

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