Question

我有以下代码

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>");

我想针对cls-1更改其颜色，但以下代码似乎无效

.cls-1{
        fill: rgb(39, 60, 117);
      }

我做错什么了吗？

如果将“颜色”代码放在多边形标签

中，则可以更改代码

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>");

我希望将其单独定位，以便让用户更改颜色而不弄乱SVG代码。

Answer 1

您不能尝试以下操作：

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

有没有一种方法可以将Background SVG特定元素作为目标来使用fill选项？

1 个答案: