我有这个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中,以我认为相同的方式编写,工作正常。我做错了什么?
对不起,我的英语,如果我犯了任何错误,这不是我的母语。
7条答案
按热度按时间2w2cym1i1#
你必须删除填充属性的内部样式,只应用css属性。无论哪种方式,都可以使用JavaScript DOM更改svg的fill属性。
6uxekuva2#
下面是一个工作示例:http://codepen.io/anon/pen/NqmrOR
问题是
fill="#1D1D1B"
属性直接放置在SVG元素上。注意:在SVG元素上使用CSS类选择器,虽然大多数最新的浏览器都支持,但并不是普遍支持。在JS中以编程方式将样式应用于SVG元素实际上得到了更好的支持。
n53p2ov03#
当使用命令
<use xlink: href =" # circle "> </use>
时,SVG元素的内容将转到Shadow DOM
因此,无法使用外部CSS更改样式
解决此问题的方法是使用强制继承继承
你可以在这篇文章中阅读更多:Styling SVG Content with CSS
gv8xihay4#
另一个我喜欢的选项是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
pu3pd22g5#
以防有人对SVG图标有CSS样式问题。是这样的:
样式应用于内部 * path * 元素,而不是直接应用于svg。正确的造型:
roejwanj6#
在我的情况下,我需要删除内部风格的svg文件(如sprite.svg)像这样,然后添加样式内正常的CSS文件
//删除fill =“rgb(0,0,0)”,然后在css文件中添加您的样式
nwwlzxa77#
引用一个类,添加到svg标签上,并定位路径,改变css文件中的颜色。
例如
一次到达所有svg