javascript - 通过以更改 Javascript 代码的方式修改 CSS 代码来更改 SVG 元素颜色的最佳方法是什么？

Question

我一直在为游戏 Simon 写一个 codepen，我被要求重写它，这样如果有人像和我一起工作的艺术家一样可以访问 html 和 css 但不知道 javascript 是如何工作的(或者无法访问 .js 文件)想要更改按钮的颜色，他们可以这样做而无需更改 javascript 代码。所以我的计划是编写 js 代码，以便它添加/删除影响路径元素的类。路径元素是这样的:

<path class="outer arc1default" id="arc1"/>

使用这些 CSS 类:

.outer {
  stroke: black;
  stroke-width: 10;
}

.arc1default {
  fill: red;
}

如果按设计颜色在点击时发生变化，则添加此类:

.arc1flash {
  fill: pink;
}

在 .js 代码的第 73 行，我使用了以下内容:

function buttonFlash(button) {
    console.log("button is: " + button);
    //$("#" + button).attr("class", button + "flash outer");
    //$("#" + button).removeClass(button + "default");
    $("#" + button).addClass(button + "flash");
    //$("#" + button).css({ fill: buttonDict[button].flash });
    buttonDict[button].sound.play();
    setTimeout(function() {
      $("#" + button).attr("class", button + "default outer");
      //$("#" + button).css({ fill: buttonDict[button].color });
      buttonDict[button].sound.pause();
      buttonDict[button].sound.currentTime = 0;
    }, 300);
  }

//符号中的代码是我之前尝试过的代码，当时没有工作，但我将其保留以供引用，以防我遗漏某些内容并错误地使用它但在正确的路径上。

无论如何，这是我观察到的结果:

如果我使用 CSS 中的 id 启动带有 fill:red 的元素，它会以红色开始并在添加/删除类时保持红色。

如果我删除了那部分代码，但在路径元素的开头是一个表示 fill:red 的类，那么它将再次以红色开头(这很好)，但是当类被删除/添加时，没有任何变化。

如果我从元素中删除 fill:red 并且不添加有问题的类，它开始时好像它有 fill:black，可能是因为外部类为边框做了 stroke: black。

如果有帮助，这里是我的代码笔的链接:https://codepen.io/glennqhurd/pen/EQqxKe

重申一下，我不是在问如何使用 Javascript 来更改 CSS。我问的是如何使用 Javascript 来更改 HTML 对象的类，从而在不更改类本身的情况下更改对象的属性。

Answer 1

您必须在 svg 上使用 .attr()... 因为 .addClass() 和 .removeClass 不起作用。 See this other answer about it .

现在，如果您想将 default/flash 连接到 按钮。

我更新了你的 CodePen

function buttonFlash(button) {
  console.log("button is: " + button);
  $("#" + button).attr("class", "outer " + button + "flash");

  buttonDict[button].sound.play();
  setTimeout(function() {
    $("#" + button).attr("class", "outer " + button + "default");
    buttonDict[button].sound.pause();
    buttonDict[button].sound.currentTime = 0;
  }, 300);
}