我无法更改 SVG Sprite 的填充颜色答案

【问题标题】：I can't change the fill color of a SVG Sprite我无法更改 SVG Sprite 的填充颜色
【发布时间】：2023-03-19 03:52:01
【问题描述】：

我有这个pen，我在其中制作了 SVG Sprites 技术的示例：

我想用 CSS 应用它：

.circle {
    fill: #f00;
}
.polyline {
    fill: #00f;
}

<svg xmlns="http://www.w3.org/2000/svg"style="position:absolute;top:-9999px;opacity:0;">    
        <symbol viewBox="0 0 64 64" id="circle">
            <title>circle</title>
                <path fill="#1D1D1B" d="M32,0C14.327,0,0,14.327,0,32c0,17.673,14.327,32,32,32s32-14.327,32-32C64,14.327,49.673,0,32,0z M32,52.5c-11.322,0-20.5-9.178-20.5-20.5S20.678,11.5,32,11.5S52.5,20.678,52.5,32S43.322,52.5,32,52.5z"/>
        </symbol>
        <symbol viewBox="0 0 56.983 64.804" id="polyline">
            <title>polyline</title>
                <polyline fill="#1D1D1B" points="0,64.804 30.726,0 56.983,0 56.983,54.749 29.33,27.095 "/>
        </symbol>
    </svg>

    <svg class="circle">
        <use xlink:href="#circle"></use>
    </svg>

    <svg class="polyline">
        <use xlink:href="#polyline"></use>
    </svg>

我的问题是我无法更改添加到 spritesheet 的元素的填充颜色。我已经寻找有关如何正确执行此操作的信息，我认为我的方法是正确的，但似乎不是那样。

在另一个pen 中，以我认为的相同方式编写，工作正常。我做错了什么？

对不起，我的英语不是我的母语。

【问题讨论】：

标签： html css svg

【解决方案1】：

使用命令<use xlink: href =" # circle "> </use> 时，SVG 元素的内容转到Shadow DOM
因此，无法使用外部 CSS 更改样式
这个问题的解决方法是使用强制ʻinherit`继承

 polyline, path {
fill:inherit;
stroke:inherit;
}

您可以在这篇文章中阅读更多内容：Styling SVG Content with CSS

polyline, path {
fill:inherit;
stroke:inherit;
}
 .circle {
fill:yellowgreen;
} 
 .circle:hover {
fill:red;
} 

.polyline {
fill:gold;
}

.polyline:hover {
fill:red;
}

<svg  xmlns="http://www.w3.org/2000/svg"style="position:absolute;top:-9999px;opacity:0;">    
    <symbol viewBox="0 0 64 64" id="circle">
        <title>circle</title>
            <path fill="#1D1D1B" d="M32,0C14.327,0,0,14.327,0,32c0,17.673,14.327,32,32,32s32-14.327,32-32C64,14.327,49.673,0,32,0z M32,52.5c-11.322,0-20.5-9.178-20.5-20.5S20.678,11.5,32,11.5S52.5,20.678,52.5,32S43.322,52.5,32,52.5z"/>
    </symbol>
    <symbol viewBox="0 0 56.983 64.804" id="polyline">
        <title>polyline</title>
            <polyline fill="#1D1D1B" points="0,64.804 30.726,0 56.983,0 56.983,54.749 29.33,27.095 "/>
    </symbol>
</svg>

<svg class="circle">
    <use  xlink:href="#circle"></use>
</svg>

<svg class="polyline">
    <use  xlink:href="#polyline" ></use>
</svg>

【讨论】：

好的，如何为 svg 设置 3 种不同的颜色，里面有 3 条路径？
@a.yushko 三个路径就像两个路径
好的！它在 Firefox 中运行良好，但不适用于基于 webkit 的浏览器。 Chrome、Opera、Edge 无法覆盖 SVG 在 sprite 中的 shadow-root 属性。

【解决方案2】：

以防万一有人在使用 SVG 图标时遇到 CSS 样式问题。这是怎么回事：

<svg width="28" height="26" viewBox="0 0 28 26" xmlns="http://www.w3.org/2000/svg">
   <path d="M27.333..../>
</svg>

样式应用于内部 path 元素，而不是直接应用于 svg。正确的样式：

svg path {
   fill: #FFFFFF;
}

【讨论】：

【解决方案3】：

我喜欢的另一个选项是 css filter 属性。

基于How to transform black into any given color using only CSS filters，您可以调整过滤器以将 svg 的颜色更改为您想要的任何颜色。更多信息：https://medium.com/@union_io/swapping-fill-color-on-image-tag-svgs-using-css-filters-fa4818bf7ec6

【讨论】：

【解决方案4】：

这是一个工作示例：http://codepen.io/anon/pen/NqmrOR

问题在于直接放置在 SVG 元素上的 fill="#1D1D1B" 属性。

注意：虽然大多数最新浏览器都支持在 SVG 元素上使用 CSS 类选择器，但并未得到普遍支持。以编程方式将样式应用于 JS 本身的 SVG 元素实际上得到了更好的支持。

【讨论】：

谢谢！我会考虑用 JS 添加一个后备。

【解决方案5】：

您必须删除 fill 属性的内部样式并且只应用 css 属性。无论哪种方式，使用 javascript DOM 更改 svg 的填充属性。

【讨论】：