首页 > web前端 > css教程 > 如何使用 CSS 添加阴影到 SVG?

如何使用 CSS 添加阴影到 SVG?

Barbara Streisand
发布: 2024-12-23 05:54:39
原创
125 人浏览过

How Can I Add a Drop Shadow to an SVG Using CSS?

是否可以使用 CSS 将投影应用于 SVG

CSS 可用于对网页上的元素应用各种效果,包括投影。但是,SVG 元素不直接支持 box-shadow 属性。

要为 SVG 实现投影效果,可以使用 CSS 滤镜属性。现代浏览器支持此属性,包括 webkit 浏览器、Firefox 34 和 Edge。还有一个 Polyfill 可以为 34 以下的 Firefox 版本和 IE6 提供支持。

以下是如何使用过滤器属性向 SVG 添加阴影:

.shadow {
  -webkit-filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, .7));
  filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, .7));
}
登录后复制

您可以在各种 SVG 元素上使用此过滤器,例如矩形、圆形和路径。例如:

<svg>
  <rect class="shadow" x="10" y="10" width="200" height="100" fill="#bada55" />
</svg>
登录后复制

这将创建一个带有阴影的矩形。您可以通过修改 drop-shadow 函数中的值来调整阴影的位置、模糊和颜色。

以上是如何使用 CSS 添加阴影到 SVG?的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板