ホバー上のSVG画像の色を変更するにはどうしたらいいですか？

Question

可能性の重複：
Changing SVG image color with javascript

私は私がそれにカーソルを合わせるとSVG画像の塗りつぶしを変更したいと思います。

今、私はIllustratorからSVGにエクスポートされた黒の疑問符を持っています。 私はimgタグで私のページを置くことができ、それはうまく表示されますが、私はどのようにコード内の色を変更するか分からない。

Answer 1

SVGファイルを変更することができますつまり、「画像」のプロパティはDOM内からアクセス可能です。スタックオーバーフローからのこの記事で

ルック：modify stroke and fill of svg image with javascript

それがそうすることを覚えておくことが重要だ、あなたは一般的なHTMLでSVGファイルを囲むことはできません* < IMG/> *タグ、*の代わりに使用します< svg> * ... ** < /svg>のように表示されます。

EDIT：あなたはSVGオブジェクトの複数のプロパティを見ることができるように、私はW3Schoolsのへのリンクを追加しました

svg on w3schools

楽しいを持っている

Answer 2

コードを投稿できる場合は、トラブルシューティングを行うことができます。

この次試してみてください：異なるイメージでこの種のコードを使用し、また（SVGへの排他的ではない）http://tutorials.jenkov.com/svg/svg-and-css.html

を：

<img src="image1.svg" 
onmouseover="this.src='image2.svg'" 
onmouseout="this.src='image1.svg'"> 

ライブデモ：http://jsfiddle.net/JNChw/

Answer 3

あなたはいけない、SVGでのホバー効果を行う必要がある場合< img>タグを使用してください。代わりに、< iframe>、<オブジェクト>または< embed>タグを使用してsvgを参照してください。 http GETリクエストを保存したい場合は、svgマークアップをHTMLドキュメントにインラインで置くことができます。

単純な塗りつぶし効果inside an svgとanother one（フィルターを使用して、ホバーの輪郭を作成するやや複雑です）を示す例です。とにかく、それは基本的に：ホバーCSSルールを適用して塗りの色を設定することです。

上記のすべてのsvgの使用方法の例は、hereです。