如何使用 CSS3 滤镜创建 SVG 阴影？

使用 CSS3 的 SVG 投影

使用 CSS3 为 SVG 元素创建投影可能看起来很混乱，特别是考虑到缺乏对传统的直接支持box-shadow 和 -webkit-box-shadow 属性。但是，有一个使用 CSS 过滤器的可行解决方法。

使用 CSS 过滤器

CSS 过滤器提供了一种将视觉效果应用于 SVG 元素的方法。要使用此方法创建投影，您可以将 filter 属性与 drop-shadow() 结合使用函数。

语法

.element {
  filter: drop-shadow(horizontal-offset vertical-offset blur-radius color);
}

示例

.shadow {
  filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, 0.7));
}

兼容性

现代支持 drop-shadow() 过滤器浏览器，包括：

• Webkit 浏览器
• Firefox 34
• Edge

Polyfill

对于不支持 drop-shadow() 滤镜的浏览器，您可以使用填充。一种流行的 Polyfill 是 [CSS Shadow](https://github.com/mdn/css-shadow)，它提供对 Firefox

应用投影

您可以将投影应用于任何 SVG 元素。只需将阴影类添加到元素即可：

<svg>
  <rect class="shadow" x="10" y="10" width="100" height="50" fill="#c66" />
</svg>

结论

使用 CSS 过滤器，您可以用最少的编码工作为 SVG 元素创建阴影。该技术与现代浏览器兼容，并支持使用 polyfill 进行跨浏览器渲染。

以上是如何使用 CSS3 滤镜创建 SVG 阴影？的详细内容。更多信息请关注PHP中文网其他相关文章！