通过以更改Javascript代码的方式修改CSS代码来更改SVG元素颜色的最佳方法是什么? [英] What is the best method of changing the color of an SVG element by modifying the CSS code in a way that changes the Javascript code?

问题描述

我一直在为游戏Simon编写一个Codepen，并被要求重写它，以便如果像艺术家这样的人正在与我合作，可以访问html和CSS，但不知道javascript的工作方式(或不能访问.js文件)想要更改按钮的颜色，而无需更改javascript代码即可.因此，我的计划是编写js代码，以便它添加/删除影响path元素的类.路径元素是这样的:

<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从w/fill:red元素开始，它会以红色开始，并在添加/删除类时保持红色.

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

如果我从元素中删除fill:red，并且不添加相关的类，则它开始时就好像它具有fill:black，这可能是因为外部类进行了笔触:边框为黑色.

以下是指向我的Codepen的链接，以防万一: https://codepen.io/glennqhurd/pen/EQqxKe

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

解决方案

您必须在svg上使用.attr().由于.addClass()和.removeClass不起作用. 查看有关此问题的其他答案.

现在，如果要将默认/flash连接到button，则必须在4种颜色上使用相同的类名称结构"(例如arc1default和arc1flash).

我更新了您的 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);
}

I've been writing a codepen for the game Simon and I was asked to rewrite it so that if somebody like an artist that was working with me had access to the html and css but didn't know how javascript worked (or didn't have access to the .js files) wanted to change the colors of the buttons they could do so w/o changing the javascript code. So my plan is to write the js code such that it adds/removes classes that affect the path elements. The path elements are like this:

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

with these css classes:

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

.arc1default {
  fill: red;
}

if the color changes on click by design, this class gets added:

.arc1flash {
  fill: pink;
}

On line 73 of the .js code I'm using the following:

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

The code in // notation is what I was trying before and wasn't working at the time but I've left it in for reference in case I missed something and used it incorrectly but was on the right path.

Anyway, here's the results I've observed:

If I start the element w/ fill:red using the id in CSS, it starts red and stays red when classes get added/removed.

If I remove that part of the code but start the path element w/ a class that says fill:red then it starts red again (which is good) but when classes get removed/added nothing changes.

If I remove the fill:red from the element and do NOT add the class in question, it starts as if it has fill:black, probably because the outer class does a stroke: black for the border.

Here's the link to my codepen in case that helps: https://codepen.io/glennqhurd/pen/EQqxKe

To reiterate, I'm not asking about how to use Javascript to change the CSS. I'm asking how to use Javascript to change the classes of the HTML objects in such a way to change the properties of the objects w/o changing the classes themselves.

解决方案

You have to use .attr() on a svg... Since .addClass() and .removeClass does not work. See this other answer about it.

Now you have to use the same class "name structure" on the 4 colors (like arc1default and arc1flash) if you want to concatenate default/flash to the button.

I updated your 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);
}

这篇关于通过以更改Javascript代码的方式修改CSS代码来更改SVG元素颜色的最佳方法是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！