如何使用javascript更改svg中路徑的顏色？

Question

有很多類似的問題，我已經閱讀了所有內容，但沒有幫助。 請幫忙。 我有一個關於codepen的例子。

我在 html 中有一個內聯 svg。 我有一個應該改變路徑顏色的按鈕。

在javascript中，我嘗試類似：

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

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

Answer 1

gar1.setAttribute('style', 'fill: green'); 和gar1.style.fill = "yellow"; 是正確的。

您的 codepen 中的問題是您選擇的是<g>元素而不是路徑。 要更改圓圈的顏色，您必須選擇第一條路徑（帶有cls-1類的路徑）。

Answer 2

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

您將在<g id="gar1">元素（ <path>元素的父標簽）上添加 style="fill:yellow"。

此樣式未應用於路徑元素，因為路徑元素具有類名（cls-1 和 cls-2），該類名具有填充屬性的樣式。

---

解決方案：

我建議刪除 svg 元素內的<defs><style>...</style></defs>並在 svg 元素本身上添加一個類名以覆蓋<path>元素的樣式。

第二步是當我們單擊執行函數 changeColor() 的按鈕時，在 svg 元素上添加一個類（活動）。

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