我不能改变SVG精灵的填充颜色

I have this pen where I have made an example of the SVG Sprites Technique:

我有这支笔，在这里我举了一个SVG精灵技术的例子:

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

And I want to apply this with CSS:

我想用CSS来应用这个

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

My problem is that I'm not able to change the fill color of the elements added to the spritesheet. I have looked for information about how to do this correctly and I think my approach it's correct but it seems that it's not like that.

我的问题是我不能改变添加到spritesheet的元素的填充颜色。我一直在寻找如何正确地做这件事的信息，我认为我的方法是正确的，但似乎不是那样的。

In this other pen, wrote in the same way I think, is working fine. What am I doing wrong?

在另一支笔里，用我认为的同样的方式写，写得很好。我做错了什么?

Sorry for my english if I have made any mistake, it's not my native language.

对不起，我的英语出了什么差错，那不是我的母语。

2 个解决方案

#1

You have to remove internal styling of fill property and only apply css property. Either way change fill property of svg using javascript DOM.

您必须删除填充属性的内部样式，并且只应用css属性。使用javascript DOM改变svg的填充属性。

#2

Here is a working example: http://codepen.io/anon/pen/NqmrOR

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

The problem was the fill="#1D1D1B" attributes placed directly on the SVG elements.

问题是直接放在SVG元素上的填充=“#1D1D1B”属性。

NOTE: Using CSS class selectors on SVG elements, while supported in most up-to-date browsers, is not universally supported. Programmatically applying styles to SVG elements in JS themselves is actually better supported.

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

#1