無法更改SVG元素的類名稱

我想通過單擊按鈕來更改應用於SVG的類。代碼是here。無法更改SVG元素的類名稱

我的SVG看起來像：

<svg id="test" class="fill" xmlns="http://www.w3.org/2000/svg" width="100%" height="200px" > 
     <path id="path22276" d="m500 81c-41-6-110-35-110-46 0-6 32 6 48 19 8 5 53 12 101 14 78 4 93 1 144-22 32-14 60-26 64-26 8 0-37 34-62 47-28 15-131 22-185 14z"/> 
</svg>

我都嘗試下面的代碼：

document.getElementById("test").className = "halffill"; 
    document.querySelector("svg.fill").setAttribute("class","halffill");

我測試了相同的javascript代碼對一個正常的div標籤。它運行良好。 SVG有一些限制嗎？請幫我弄清楚這一點。

來源

2016-06-21 0aslam0

如果你打開你的控制檯，你會看到錯誤。在你的函數下添加'window.deFill = deFill;'。我認爲問題出在JSFiddle上，因爲你的代碼在codepen中工作：http://codepen.io/anon/pen/wWoBaw – Pjetr

@Pjetr我不明白你的意思加入'window.deFill = deFill;'。我不明白爲什麼它在jsfiddle – 0aslam0

失敗，我添加了一些評論，也許它現在更清晰？ HTTP：//的jsfiddle。net/p19rnmev/2/ – Pjetr

問題是JavaScript的負載型設定爲onload其製成在主體的負載，而不是按鈕的onclick的函數調用。

解決方案：您可以在javascript部分的右上角看到齒輪圖標。點擊它，改變負載類型到不循環-in<頭>

來源

2016-06-23 05:45:32

什麼齒輪圖標？這個問題沒有帶有齒輪圖標或javascript部分的標籤。 –

@ 0aslam0提供了一個鏈接到他的[code]（http://jsfiddle.net/p19rnmev/）。在那裏你可以找到齒輪圖標。齒輪圖標是指設置。你也可以找到各種部分（javascript，html，css）。 –

事情是，JavaScript不會在源代碼中更新。您需要檢查檢查模式中的更改。第一個也沒有爲我工作，但第二個工作。

document.querySelector("svg.fill").setAttribute("class","halffill");

點擊即旨在改變類的名稱，然後按鈕進入檢查模式，並檢查SVG標籤

注意的類名稱：要進入檢查模式右鍵單擊屏幕上的任意位置，然後單擊檢查或在Windows中的谷歌瀏覽器中使用Ctrl + Shift + I。

來源

2016-06-21 11:39:07

我在chrome中檢查了檢查模式。但對我而言這並沒有改變。 – 0aslam0

問題是javascript **加載類型**被設置爲** onload **，它使得在加載body時調用函數，而不是按鈕onclick。解決方案：您可以在JavaScript部分的右上角看到齒輪圖標。點擊它並將**加載類型**更改爲**不包裝 - 如果您將此作爲答案添加爲 ** –

，我可以接受它。 – 0aslam0

帶有setAttribute的版本適用於我。對於className，你需要在baseVal SVG：

document.getElementById("test").className.baseVal = "halffill";

來源

2016-06-21 13:38:31 zayjuc

SVG元素上的className酒店從HTML元素的className性質不同的定義。

在HTML中，className是一個字符串。在SVG中，它是一個SVGAnimatedString對象。這就是爲什麼你不能只做svgElement.className = "halffill"。

但是，第二行（使用setAttribute()）應該工作。

來源

2016-06-21 15:54:04

或者你可以使用班級列表屬性：

的document.getElementById（「測試」）classList.add （「halffill」）;

來源

2017-09-15 16:33:35 gnou

無法更改SVG元素的類名稱

回答

相關問題