使用 JS 更改 svg 的 css 填充答案

【问题标题】：Changing css fill for svg with JS使用 JS 更改 svg 的 css 填充
【发布时间】：2026-01-20 00:50:01
【问题描述】：

我正在尝试使用 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"
        });
    }
}

有些东西没有融合在一起，填充颜色保持黑色，就像它在样式标签中一样。我做错了什么？

【问题讨论】：

你是如何调用你的函数的？，覆盖内联样式通常需要一个 !important 在属性之后。
它的 jquery 语法，不是纯 javascript。试试svg_css.style.fill = "#EF4136"
可能与this重复
Changing SVG image color with javascript的可能重复

标签： javascript css svg fill

【解决方案1】：

你可以使用svg_css.style.fill = "#hexadecimal"而不是svg_css.css({"fill" : "#hexadecimal"})

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

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

【讨论】：

【解决方案2】：

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

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

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

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

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

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

你需要做的是通过类名获取元素，然后因为返回一个元素列表，选择你想要的（在我们的例子中是第一个）。然后，设置填充，使用@987654329具有fill 属性的@ 属性。

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

&lt;svg class="cls-1" width="100" height="100" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"&gt;&lt;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"/&gt;&lt;/svg&gt;

【讨论】：