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

Question

我有这个笔,我已经做了一个SVG Sprites技术的例子:

<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>

我想用CSS应用它:

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

我的问题是我无法更改添加到spritesheet的元素的填充颜色.我已经查找了有关如何正确执行此操作的信息,我认为我的方法是正确的,但似乎并非如此.

在另一支钢笔中,我认为用同样的方式编写,工作正常.我究竟做错了什么？

如果我犯了任何错误,对不起我的英语,这不是我的母语.

Answer 1

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

Answer 2

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

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

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

Answer 3

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

\n

 polyline, path {\nfill:inherit;\nstroke:inherit;\n}\n

\n

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

\n

\r\n

\r\n

 polyline, path {\nfill:inherit;\nstroke:inherit;\n}\n

\r\n

polyline, path {\nfill:inherit;\nstroke:inherit;\n}\n .circle {\nfill:yellowgreen;\n} \n .circle:hover {\nfill:red;\n} \n\n.polyline {\nfill:gold;\n}\n\n.polyline:hover {\nfill:red;\n}

\r\n

\r\n

\r\n

\n