如何使用javascript更改svg中路径的颜色？

Question

there are many similar questions, i've read everything and it didn't help. Please help. I have an example on codepen .

I have an inline svg in html. I have a button that should change paths' color.

In javascript i try something like:

let gar1=document.getElementById("gar1");

function changeColor() {
  console.log(gar1);
  gar1.setAttribute('style', 'fill: green');
  gar1.style.fill = "yellow";
  }

Answer 1

Both gar1.setAttribute('style', 'fill: green'); and gar1.style.fill = "yellow"; are correct.

The problem in your codepen is that you are selecting the <g> element instead of the path. To change the color of the circle you will have to select the first path (the one with the cls-1 class).

Answer 2

Your svg is:

<svg width="150" id="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 367.45 382.12">
  <defs>
    <style>
      .cls-1 {
        fill: #e73834;
      }

      .cls-2 {
        fill: #010101;
      }
    </style>
  </defs>
  <g id="gar1">
    <path class="cls-1" d="M283.5,36.66c-71.83,0-131.28,42-162.17,106.88-47,98.67,10.26,233.63,115.05,264.7S464.73,353,467.89,243.76,421,36.66,283.5,36.66Z" transform="translate(-102.66 -34.59)"></path>
    <path class="cls-2" d="M283.5,34.59a173.73,173.73,0,0,0-115.81,43.5,195.8,195.8,0,0,0-40.13,49.19,180.83,180.83,0,0,0-21.28,55.17,191.34,191.34,0,0,0-2.63,56.61,213.84,213.84,0,0,0,41,105.62,191.81,191.81,0,0,0,39.91,39.9A166.94,166.94,0,0,0,234.92,410a161.68,161.68,0,0,0,58.15,6.34,187.18,187.18,0,0,0,57.26-13.51,206.33,206.33,0,0,0,51-29.91,196.11,196.11,0,0,0,39.92-43,168.93,168.93,0,0,0,24-52.72c4.78-18.73,5.4-38,4.54-57.22a268.45,268.45,0,0,0-7.46-52.92,200.55,200.55,0,0,0-18.12-47.33,159.72,159.72,0,0,0-29.78-39.2A153.76,153.76,0,0,0,372,52a194,194,0,0,0-56.29-15.42,261.08,261.08,0,0,0-32.23-1.95c-2.66,0-2.67,4.14,0,4.14,20.85,0,41.74,2.25,61.85,7.9a162.78,162.78,0,0,1,47.72,21.9A147.62,147.62,0,0,1,428,102.07a172.82,172.82,0,0,1,23,42.6,230.5,230.5,0,0,1,12.29,49.57,277.89,277.89,0,0,1,2.28,53.93,152.67,152.67,0,0,1-14,55,179.41,179.41,0,0,1-32,47.13,200.43,200.43,0,0,1-45.28,36.1,195.14,195.14,0,0,1-53.64,21.55,169.64,169.64,0,0,1-56.89,3.73,155.29,155.29,0,0,1-54.11-16.3,174.51,174.51,0,0,1-44.18-32.6A199.36,199.36,0,0,1,132.42,318a211.53,211.53,0,0,1-20-52.1A199.44,199.44,0,0,1,107,210.43a174.93,174.93,0,0,1,11.12-54.16,193,193,0,0,1,31.34-53.41,179.6,179.6,0,0,1,46.21-40.09,168.81,168.81,0,0,1,57-21.35,176.66,176.66,0,0,1,30.8-2.69C286.17,38.73,286.17,34.59,283.5,34.59Z" transform="translate(-102.66 -34.59)"></path>
  </g>
</svg>

You are adding a style="fill:yellow" on the <g id="gar1"> element, the parent tag of the <path> elements.

This styling is not applied on the path elements because the path elements have a classname (cls-1 and cls-2) which has styling for the fill attribute.

---

Solution:

What I would recommend is remove the <defs><style>...</style></defs> inside the svg element and add a class name on the svg element itself to override the styling of the <path> elements.

The second step is to add a class (active) on the svg element when we click on the button which executes the function changeColor().

HTML:

<svg class="circle" ...>...</svg>

CSS:

/* circle background path */
.circle g path.cls-1 {
  fill: red;
}

.circle.active g path.cls-1 {
  fill: green;
}

/* circle border path*/
.circle g path.cls-2 {
  fill: black;
}

.circle.active g path.cls-2 {
  fill: green;
}

Javascript:

const svg = document.getElementById("svg");

function changeColor() {
  console.log(svg );
  svg.classList.add('active');
}