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

Question

我有这支 笔，我在其中制作了 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 的元素的填充颜色。我一直在寻找有关如何正确执行此操作的信息，我认为我的方法是正确的，但似乎并非如此。

在这支 笔 中，以我认为相同的方式书写，工作正常。我究竟做错了什么？

如果我有任何错误，请原谅我的英语，这不是我的母语。

原文由 Miguel Morera 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

原文由 Sachin Kanungo 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

使用命令时 <use xlink: href =" # circle "> </use> SVG 元素的内容转到 Shadow DOM

因此，无法使用外部 CSS 更改样式

这个问题的解决方案是使用强制`inherit`继承

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

您可以在这篇文章中阅读更多内容： 使用 CSS 设置 SVG 内容样式

 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>

原文由 Alexandr_TT 发布，翻译遵循 CC BY-SA 4.0 许可协议