首页 > web前端 > css教程 > 我可以使用 CSS 更改 SVG 路径的填充颜色吗?

我可以使用 CSS 更改 SVG 路径的填充颜色吗?

Patricia Arquette
发布: 2024-11-07 02:34:03
原创
651 人浏览过

Can I Change the Fill Color of an SVG Path with CSS?

使用 CSS 动态着色 SVG 路径

我可以使用 CSS 更改 svg 路径的填充颜色吗?

考虑以下 SVG 代码:

<svg height="32" version="1.1" width="32" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative; left: -0.0166626px; top: -0.983337px;">
  <desc></desc>
  <defs></defs>
  <path style="" fill="#333333" stroke="none" d="M15.985,5.972C8.422,5.972,2.289999999999999,10.049,2.289999999999999,15.078C2.289999999999999,17.955,4.302999999999999...............1,27.68,22.274Z"/>
</svg>
登录后复制

是否可以使用 CSS 或任何其他方法修改 SVG 路径的填充颜色,而无需在 中显式更改它标签?

答案:

是的,使用 CSS 来设置 SVG 元素的样式是可行的。但是,您必须像设置 HTML 样式时一样定位该元素。要将样式应用于所有 SVG 路径,例如:

path {
  fill: blue;
}
登录后复制

外部 CSS 往往会覆盖 WebKit 和 Gecko 等浏览器中路径的 fill 属性。但是,需要注意的是,如果直接在 中指定填充颜色,标签(例如,),它将覆盖任何外部 CSS 样式。

以上是我可以使用 CSS 更改 SVG 路径的填充颜色吗?的详细内容。更多信息请关注PHP中文网其他相关文章!

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