0

jQuery SVGを使用していくつかの図形を描画しています。外部ベクター画像 (svg 形式) を図形に描画したいと考えています。以前は、プラグインの .image() メソッドを使用して外部アイコンを描画していましたが、特に Retina ディスプレイ用にアイコンをスケーリングできるようにしたいと考えています。

私は次のようにアイコンを描きます：

this.canvas.image(($parent), icon_box.x, icon_box.y , icon_box.width, icon_box.height, 'resources/img/ui/someicon.svg');

それは実際に機能しますが、jQueryコード内からsvgアイコン/画像/パスの色を制御したいと思います. jQuery SVG image()メソッドは設定パラメーターを提供しますが、jpg 画像などの色を変更できないため、色を制御するオプション (存在する場合) がわかりません。

それで、それを行う方法はありますか？また、マウスオーバーイベントの色を変更したいと思います。image()メソッドを使用しないことをお勧めしますか? ボックス（および内部のアイコン）が残りの形状に合わせて拡大縮小されるため、アイコンをアイコンボックスに合わせる必要があります。

どうもありがとう！ニック =)

4

1 に答える 1

1

SVG で CSS :hover 疑似クラスを使用できます。SVG 内で CSS スタイルを定義するか、SVG 内から CSS ファイルを参照するだけです。

例については、この質問を参照してください: How to hover over an SVG rect?

何らかの理由で元の SVG ファイルを編集できない場合は、読み込み後にスタイル要素を動的に追加できます。ポインター イベント (onmouseover/onmouseout) を追加することによっても実行できます。

于 2013-09-15T11:23:36.197 に答える