是否可以使用 css3 为 svg 元素设置阴影，例如
box-shadow: -5px -5px 5px #888;
-webkit-box-shadow: -5px -5px 5px #888;
我看到一些关于使用滤镜效果创建阴影的评论。有单独使用css的例子吗？下面是一个工作代码，其中正确应用了光标样式，但没有阴影效果。请帮助我用最少的代码获得阴影效果。
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>
使用CSSfilter https://developer.mozilla.org/en-US/docs/Web/CSS/filter#drop-shadow()_2财产。
支持 webkit 浏览器 http://caniuse.com/#feat=css-filters、Firefox 34+ 和 Edge。
你可以用这个polyfill https://github.com/Schepp/CSS-Filters-Polyfill将支持 FF
你会像这样使用它：
/* 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 元素本身的轮廓。
NOTE：当课程被放置在<svg>单独的元素。您现在可以在内联 svg 元素上使用它，例如<rect>.
阅读有关 CSS 过滤器的更多信息here https://web.dev/learn/css/filters/.
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
