为svg背景图标添加颜色
为svg背景图标添加颜色
提问于 2021-09-13 15:58:35
嗨，有没有办法像这样改变背景的svg图像的颜色？
.icon {
background: url("~images/icon.svg") center no-repeat;
}<i class="icon"></i>
例如，我需要它的图标填充蓝色，但这是不可能的，像这样的背景，有没有办法？
回答 2
Stack Overflow用户
发布于 2021-09-13 16:04:03
如果将SVG作为元素而不是背景图像CSS属性加载到HTML中，则可以更改该元素的fill属性
#mySVG
{
fill: red !important;
}<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#000" viewBox="0 0 16 16" id="mySVG">
<path d="m8 2.748-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01L8 2.748zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143c.06.055.119.112.176.171a3.12 3.12 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15z"/>
</svg>
Stack Overflow用户
发布于 2021-09-13 17:02:35
如果SVG有一个透明的背景，您可以根据需要将background-image和background-color设置为SVG和SVG。它们会堆叠在一起。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69165799
复制相关文章
相似问题
腾讯云开发者
