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

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

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

Answer 1

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

Answer 2

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

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

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

Answer 3

当使用命令<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>

Answer 4

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

基于如何仅使用 CSS 过滤器将黑色转换为任何给定颜色，您可以调整过滤器以将 svg 的颜色更改为您想要的任何颜色。 更多信息： https : //medium.com/@union_io/swapping-fill-color-on-image-tag-svgs-using-css-filters-fa4818bf7ec6

Answer 5

以防万一有人对 SVG 图标有 CSS 样式问题。 这是怎么回事：

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

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

svg path {
   fill: #FFFFFF;
}