Question

我正在尝试使用JS更改使用css定义的svg填充颜色。由于某种原因，它不起作用。这是我的代码：

SVG本身（简称）：

<svg id="secondalert"><style>.cls-1{fill:#000000;}</style></svg>

JS要定位并改变它：

function() {
    var svg_css = document.getElementsByClassName('.cls-1');

    if (random_value < 20) {
        svg_css.css({
            "fill": "#EF4136"
        });

    } else {
        svg_css.css({
            "fill": "#EF4136"
        });
    }
}

某些东西没有聚集在一起，填充颜色在样式标签中保持黑色。我做错了什么？

Answer 1

您可以使用svg_css.css({"fill" : "#hexadecimal"})

而不是svg_css.style.fill = "#hexadecimal"

而且，当你使用getElementsByClassName时，它返回一个数组，而不是使用getElementById或选择数组中的元素：

svg_css = document.getElementsByClassName('.cls-1')[0];

Answer 2

在我们改变风格之前，有几点需要注意：

var svg_css = document.getElementsByClassName('.cls-1');

按类名获取元素很好，但.选择器特定于CSS。这意味着svg_css将设置为类.cls-1 NOT cls-1的任何元素。

其次，HTML中没有cls-1类的元素。具有此类的元素如下所示：

<svg id="secondalert" class="cls-1"></svg>

我猜测random_value在其他地方被声明，但你可能想要在该函数中有一个随机值。

你需要做的是按类名获取元素，然后返回一个元素列表，选择你想要的那个（在我们的例子中是第一个。）然后，要设置填充，请使用{{ 1}}具有style属性的属性。

fill

var elements = document.getElementsByClassName('cls-1');
elements[0].style.fill = Math.random()*40 > 20 ? "blue" : "red";

用JS改变svg的css填充

2 个答案: