是否可以使用 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>
最佳答案
使用新 CSS filter
属性。
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 元素本身的轮廓。
注意:当类(class)放在 <svg>
上时,这种方法曾经有效。单独的元素。您现在可以在内联 svg 元素上使用它,例如 <rect>
.
在 html5rocks 上阅读有关 CSS 过滤器的更多信息.
关于html - 使用 css3 的 SVG 投影,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6088409/