重複の可能性：
JavaScriptでSVG画像の色を変更する
ホバーしたときに SVG 画像の塗りつぶしを変更したいと思います。
現在、Illustrator から SVG にエクスポートされた黒い疑問符があります。img タグを使用してページに配置でき、問題なく表示されますが、コードで色を変更する方法がわかりません。
32386 次
3 に答える
7
svg でホバー効果を行う必要がある場合は、 <img> タグを使用しないでください。代わりに、<iframe>、<object>、または <embed> タグで svg を参照してください。http GET リクエストを保存したい場合は、svg マークアップを HTML ドキュメントにインラインで配置できます。
これは、 svg 内の単純な塗りつぶしホバー効果を示す例と、別の例です(フィルターを使用してホバー時にアウトラインを作成する、少し複雑です)。とにかく、基本的には :hover CSS ルールを適用して塗りつぶしの色を設定することです。
上記の svg の使用方法すべてを含む例は、こちらで見ることができます。
于 2012-08-28T11:43:52.017 に答える
1
SVG ファイルは JavaScript から直接変更できます。つまり、「画像」のプロパティは DOM 内からアクセスできます。
スタック オーバーフローからこの投稿を見てください: javascript で svg 画像のストロークと塗りつぶしを変更します
そのためには、svg ファイルを一般的な HTML < img/>タグで囲むことはできません。投稿に示されているように、代わりに < svg> ... < /svg> を使用してください。
編集: w3schools の svg
svg オブジェクトのより多くのプロパティを表示できるように、w3schools へのリンクを追加しました
楽しんで
于 2012-08-27T07:04:39.137 に答える
-2
コードを投稿していただければ、問題を解決できるかもしれません。
これに従ってみてください：http://tutorials.jenkov.com/svg/svg-and-css.html
別の方法として (SVG に限らず)、このタイプのコードをさまざまな画像で使用します。
<img src="image1.svg"
onmouseover="this.src='image2.svg'"
onmouseout="this.src='image1.svg'">
ライブデモ: http://jsfiddle.net/JNChw/
于 2012-08-27T04:42:49.937 に答える