SVG要素のクラス名を変更できません

ボタンをクリックしてSVGに適用されるクラスを変更したいと思います。コードはhereです。SVG要素のクラス名を変更できません

私のSVGは次のようになります。私は、通常のdivタグに対して同じJavaScriptコードをテストした

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

：

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

私は以下のコードの両方を試してみました。それは正常に働いた。 SVGにいくつかの制限がありますか？これを理解するのを助けてください。

出典

2016-06-21 0aslam0

コンソールを開くと、エラーが表示されます。あなたの関数の下に 'window.deFill = deFill;'を追加してください。あなたのコードがcodepenで動作するので、問題はJSFiddleであると思う：http：//codepen.io/anon/pen/wWoBaw – Pjetr

@Pjetr 'window.deFill = deFill;'を追加することで意味を理解できませんでした。私はなぜそれがjsfiddleで失敗したのか理解できません – 0aslam0

私はいくつかのコメントを追加しました、多分それは今より明確ですか？ http：// jsfiddle。net/p19rnmev/2/ – Pjetr

問題ではなく、ボタンのonclickの身体の負荷の関数呼び出しを行っているJavaScriptの負荷タイプがonloadに設定しました。

解決策：javascriptセクションの右上に歯車のアイコンが表示されます。それをクリックしないとに負荷タイプを変更ませラップに< -inヘッド>

出典

2016-06-23 05:45:32

どの歯車アイコンですか？この質問には、歯車アイコンやjavascriptセクションがあるものはタグには載っていません。 –

@ 0aslam0は彼の[code]（http://jsfiddle.net/p19rnmev/）へのリンクを提供しています。そこに歯車のアイコンがあります。歯車アイコンは設定を参照します。また、さまざまなセクション（javascript、html、css）を見つけることができます。 –

JavaScriptがソースコード内で更新されないということです。検査モードで変更を確認する必要があります。最初のものは私のために働いていませんでしたが、2番目のものは動作します。モードを検査するために移動するには：その後、クラスの名前を変更してすることを意図しているボタンの

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

をクリックしてモードを検査し、SVGタグ

注のクラス名を確認するために行きます画面上の任意の場所を右クリックしてをクリックしてください。を検査するか、WindowsのGoogle Chromeでctrl + shift + Iを使用してください。

出典

2016-06-21 11:39:07

私はクロムの検査モードをチェックインしました。しかし、それは私のために変化していません。 – 0aslam0

問題は、ボタンのonclickの代わりに本体のロード時に関数呼び出しを行った** onload **にjavascript **のロードタイプ**を設定したことでした。解決策：javascriptセクションの右上に歯車のアイコンが表示されます。それをクリックして、**負荷タイプ**を**ラップインなしに変更します。 ** –

これを回答として追加すると、それを受け入れることができます。 – 0aslam0

setAttributeのバージョンは私に役立ちます。 classNameのために、あなたはSVGでbaseValを必要とする：SVG要素に

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

出典

2016-06-21 13:38:31 zayjuc

classNameプロパティは、HTML要素のclassName性質は異なる定義があります。

HTMLでは、classNameは文字列です。 SVGではSVGAnimatedStringオブジェクトです。だからこそ、あなたはsvgElement.className = "halffill"をやることができません。

ただし、2行目（setAttribute()を使用）は機能するはずです。

出典

2016-06-21 15:54:04

をそれとも、CLASSLISTプロパティを使用することができます。

のdocument.getElementById（ "テスト"）classList.add （ "halffill"）;

出典

2017-09-15 16:33:35 gnou

SVG要素のクラス名を変更できません

答えて

関連する問題