Css 有没有一种方法可以针对特定于SVG的背景元素使用填充选项？

我有以下代码

background-image: url("data:image/svg+xml;charset=UTF-8,<svg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' width='47' height='47' viewBox='0 0 120 120'><polygon  class='cls-1' points='120 120 60 120 90 90 120 60 120 0 120 0 60 60 0 0 0 60 30 90 60 120 120 120'/></svg>");

我做错什么了吗

如果我将颜色代码放在多边形标记内，则可以更改代码

background-image: url("data:image/svg+xml;charset=UTF-8,<svg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' width='47' height='47' viewBox='0 0 120 120'><polygon fill='rgb(39, 60, 117)' class='cls-1' points='120 120 60 120 90 90 120 60 120 0 120 0 60 60 0 0 0 60 30 90 60 120 120 120'/></svg>");

backgroundimage:url（“数据：image/svg+xml；charset=UTF-8，”）；

---

我希望将其单独作为目标，这样我就可以让用户更改颜色，而不会弄乱SVG代码。

如果不能，请尝试以下方法：

<style>
    div {
        width:47px;
        height:47px;
        background-image: url("data:image/svg+xml;charset=UTF-8,<svg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' width='47' height='47' viewBox='0 0 120 120'><polygon  class='cls-1' points='120 120 60 120 90 90 120 60 120 0 120 0 60 60 0 0 0 60 30 90 60 120 120 120'/></svg>");
    }

    div.blue {
        background-image: url("data:image/svg+xml;charset=UTF-8,<svg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' width='47' height='47' viewBox='0 0 120 120'><polygon fill='rgb(39, 60, 117)'  class='cls-1' points='120 120 60 120 90 90 120 60 120 0 120 0 60 60 0 0 0 60 30 90 60 120 120 120'/></svg>"); 
    }

</style>
<div class="blue"></div>

div{
宽度：47px；
高度：47px；
背景图像：url（“数据：image/svg+xml；charset=UTF-8，”）；
}
蓝色分区{
背景图像：url（“数据：image/svg+xml；charset=UTF-8，”）；
}

如果不行，请尝试以下方法：

<style>
    div {
        width:47px;
        height:47px;
        background-image: url("data:image/svg+xml;charset=UTF-8,<svg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' width='47' height='47' viewBox='0 0 120 120'><polygon  class='cls-1' points='120 120 60 120 90 90 120 60 120 0 120 0 60 60 0 0 0 60 30 90 60 120 120 120'/></svg>");
    }

    div.blue {
        background-image: url("data:image/svg+xml;charset=UTF-8,<svg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' width='47' height='47' viewBox='0 0 120 120'><polygon fill='rgb(39, 60, 117)'  class='cls-1' points='120 120 60 120 90 90 120 60 120 0 120 0 60 60 0 0 0 60 30 90 60 120 120 120'/></svg>"); 
    }

</style>
<div class="blue"></div>

div{
宽度：47px；
高度：47px；
背景图像：url（“数据：image/svg+xml；charset=UTF-8，”）；
}
蓝色分区{
背景图像：url（“数据：image/svg+xml；charset=UTF-8，”）；
}

背景图像内容是单独的文档。只有图像内部的CSS对其有任何影响。您可以使用javascript更改背景：

…多边形填充=“${newColor}”…

背景图像内容是单独的文档。只有图像内部的CSS对其有任何影响。您可以使用javascript更改背景：

…多边形填充=“${newColor}”…