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

有很多类似的问题，我读了所有的东西，但都没用。 请帮忙。 我有一个例子

我有一个html中的内联svg。 我有一个按钮，可以改变路径的颜色

在javascript中，我尝试了以下方法：

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

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

---

都

gar1.setAttribute（'style'，'fill:green'）和
gar1.style.fill=“黄色”是正确的

代码笔中的问题是选择的是
元素而不是路径。要更改圆的颜色，您必须选择第一条路径（带有
cls-1
类的路径）。
您的svg是：

<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>

Javascript:

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

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

/* 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;
}

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

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