Question

我有这个pen，我在这里举了一个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中的元素的填充颜色。我已经查找了有关如何正确执行此操作的信息，我认为我的方法是正确的，但似乎并非如此。

在另一个pen中，我以同样的方式写道，工作得很好。我做错了什么？

如果我犯了任何错误，我的英语很抱歉，这不是我的母语。

Answer 1

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

Answer 2

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

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

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

Answer 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

Answer 4

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

 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>

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>

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

svg path {
   fill: #FFFFFF;
}

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

5 个答案: