SVG颜色不变[重复]

Posted 2023-03-06

【中文标题】SVG颜色不变[重复]

【英文标题】：SVG color not changing [duplicate]

【发布时间】：2016-08-04 20:39:46

【问题描述】：

对于一个项目，我们一直在使用 SVG 图像。我正在尝试为它们着色但没有成功，这是 SVG：

<svg id="Calque_2" data-name="Calque 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 313.89 311.93">
<defs>
    <style>
        .cls-1 
            fill: #fff;
            opacity: 0.3;
        
    </style>
</defs>
<title>goutte_background</title><path
    class="cls-1"
    d="M1145.43,987.78c-45,0-81.7-35.18-82.09-79.35v-4.3h0a63.88,63.88,0,0,1,2-14.07,90.58,90.58,0,0,1,6.25-17.2c13.68-30.49,38.7-63.33,38.7-63.33,18.76-26.58,27.36-46.91,30.88-59.81a147.8,147.8,0,0,0-57.07,12.12,158.6,158.6,0,0,0-83.26,83.26,151.14,151.14,0,0,0-12.12,60.59c0,21.5,3.91,41.83,12.12,60.59a158.6,158.6,0,0,0,83.26,83.26c18.76,8.21,39.09,12.12,60.59,12.12h2c21.5,0,41.83-3.91,60.59-12.12a158.6,158.6,0,0,0,83.26-83.26c8.21-18.76,12.12-39.09,12.12-60.59a151.14,151.14,0,0,0-12.12-60.59,158.6,158.6,0,0,0-83.26-83.26,147.8,147.8,0,0,0-57.07-12.12c3.52,12.9,12.12,33.23,30.88,59.81,0,0,25,32.84,38.7,63.33a90.58,90.58,0,0,1,6.25,17.2,63.88,63.88,0,0,1,2,14.07h0v4.3c-0.39,44.17-37.14,79.35-82.09,79.35h-0.39Z"
    transform="translate(-988.68 -749.72)"/><path
    class="cls-1"
    d="M1145.43,778.26l1.56,6.25c2,8.21,7.82,25.8,24.63,49.64,0,0,18.76,24.24,28.93,46.91a62.83,62.83,0,0,1,4.69,12.9,32.92,32.92,0,0,1,1.56,10.55h0v3.13c0,32.84-27.36,59-61,59h-0.39c-33.62,0-61-26.19-61-59v-3.13h0A32.93,32.93,0,0,1,1086,894a62.83,62.83,0,0,1,4.69-12.9c10.16-22.67,28.93-46.91,28.93-46.91,16.81-23.84,22.67-41.43,24.63-49.64Z"
    transform="translate(-988.68 -749.72)"/></svg>

我目前正在使用这个 SVG 作为 div 的背景，我正在努力改变它的颜色。

这是我尝试过的：

.someParent .cls-1 填充：#0080FF ！重要；

和

.someParent svg 
  fill: #0080FF !important;

我也一直在尝试删除 SVG 的 style，但这没有效果。

这是使用 SVG 作为我的 div 背景的 CSS：

background: #ffffff url("../images/goutte_background.svg") no-repeat right top;

【问题讨论】：

CSS 不知道嵌套选择器。我认为.someParent .cls-1 /*...*/ 或.someParent svg /*...*/ 是您要找的。​​span>

我的错，我正在使用 sass

除非你有 Sass->CSS 编译问题，只发布编译后的 CSS

【参考方案1】：

如果是背景图像，则无法调整 SVG 填充。见：https://css-tricks.com/using-svg/#article-header-id-6。

一种可能的解决方案是内联 SVG，这样您就可以修改其填充颜色，然后将其绝对定位在您想要的位置之后。

【讨论】：

是的，我就是这么想的，只是想确认一下。知道如果它是 bg-image 为什么它不起作用吗？

@Jorel Amthor 不完全确定。我的直觉是 DOM 无法访问 background-image 的内部结构，因此您无法设置它们的样式。然而，如果您内联 SVG，则可以操纵内部结构。

@JorelAmthor 因为 CSS 适用于每个文档，并且图像是单独的文档。此外，图像的语义被设计成一致的，这意味着像光栅一样。

【参考方案2】：

如果是背景图像，则无法调整 SVG 填充。请参阅：https://css-tricks.com/using-svg/#article-header-id-6。

一种可能的解决方案是内联 SVG，以便您可以修改其填充 颜色，然后绝对将它放在你想要的后面 后面。

正如 Timolawl 所说，就是这样。 我使用了不同的技巧，我只是复制了图像并更改了style 标签中的颜色