我无法更改SVG Sprite的填充颜色 [英] I can't change the fill color of a SVG Sprite

问题描述

我有这个 pen ，在此我举了一个SVG Sprites技术的示例:

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

<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中应用它:

And I want to apply this with CSS:

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

我的问题是我无法更改添加到Spritesheet中的元素的填充颜色.我一直在寻找有关如何正确执行此操作的信息，我认为我的方法是正确的，但似乎并非如此.

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.

在另一本 pen 中，我以同样的方式写的很好.我在做什么错了?

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.

推荐答案

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

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

这篇关于我无法更改SVG Sprite的填充颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！