如何更改svg元素的颜色？

2023-07-03 16:09| 来源: 网络整理| 查看: 265

您不能以这种方式更改图像的颜色。如果将SVG加载为图像，则无法在浏览器中使用CSS或Javascript更改其显示方式。

如果你想改变你的SVG图像，你必须用它来装载，或使用在线。

如果要使用页面中的技术，则需要Modernizr库，您可以在其中检查SVG支持并有条件地显示或不显示后备图像。然后，您可以内联SVG并应用所需的样式。

见：

显示代码段

#time-3-icon { fill: green; } .my-svg-alternate { display: none; } .no-svg .my-svg-alternate { display: block; width: 100px; height: 100px; background-image: url(image.png); } 展开摘要

您可以内嵌SVG，并使用类名称（my-svg-alternate）标记后备图片：

在CSS中，使用no-svgModernizr中的类（CDN：http：//ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.7.2.js）来检查SVG支持。如果不支持SVG，将忽略SVG块并显示图像，否则将图像从DOM树（display: none）中删除：

.my-svg-alternate { display: none; } .no-svg .my-svg-alternate { display: block; width: 100px; height: 100px; background-image: url(image.png); }

然后，您可以更改内联元素的颜色：

#time-3-icon { fill: green; }

【本文地址】

如何更改svg元素的颜色？

如何更改svg元素的颜色？

今日新闻

推荐新闻