使用 JS 更改 css 填充 svg

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.style.fill = "#hexadecimal"

而不是 svg_css.css({"fill" : "#hexadecimal"})

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

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

Answer 2

在开始更改样式之前，需要注意以下几点：

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

通过 class 名称获取元素没问题，但 . selector 特定于 CSS。这意味着 svg_css 将被设置为 .cls-1 的 class 不是 cls-1.

的任何元素

其次，您的HTML中没有cls-1的class元素。具有这种 class 的元素看起来像：

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

我猜 random_value 是在别处声明的，但您可能希望在该函数中有一个随机值。

你需要做的是通过 class 名称获取元素，然后 returns 一个元素列表，select 你想要哪个（在我们的例子中是第一个一个。）然后，要设置填充，请使用 style 属性其中有一个 fill 属性.

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

<svg class="cls-1" width="100" height="100" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1417 1632h-1118v-480h-160v640h1438v-640h-160v480zm-942-524l33-157 783 165-33 156zm103-374l67-146 725 339-67 145zm201-356l102-123 614 513-102 123zm397-378l477 641-128 96-477-641zm-718 1471v-159h800v159h-800z"/></svg>

使用 JS 更改 css 填充 svg

Changing css fill for svg with JS

javascript

css

svg

fill