アイコンに SVG スプライトシートを使用しています。:hover/:active で色を変更したいと思います。SVG の色を変更する唯一の方法 (私が見つけた) は、SVG データがインラインである場合です。外部 .svg をインライン SVG コードに変換するための優れたスクリプトがあります。
CSS(jQuery SVG画像置換)を使用してSVG画像の色を変更するには?
ページ上のすべてのスプライトには、特定のスプライトが表示する必要がある 1 つだけではなく、スプライトシート全体のパスが挿入されるためです。
クラス (またはその他のもの) に基づいて、スプライトシートの xml の特定の部分 (スプライト) を抽出して HTML マークアップに入れる方法はありますか? 私の唯一の考えは、スプライトシートを手動で分割し、各スプライトパス文字列を配列/オブジェクトに入れ、js (おそらくラファエル) を使用してインラインマークアップを記述し、ホバーカラーを設定することです。しかし、それがどのような種類のオーバーヘッドを追加するのか、またはそれがすべきではないことを行うための本当に複雑な方法なのかどうかはわかりません.