3

アイコンに SVG スプライトシートを使用しています。:hover/:active で色を変更したいと思います。SVG の色を変更する唯一の方法 (私が見つけた) は、SVG データがインラインである場合です。外部 .svg をインライン SVG コードに変換するための優れたスクリプトがあります。

CSS(jQuery SVG画像置換)を使用してSVG画像の色を変更するには?

ページ上のすべてのスプライトには、特定のスプライトが表示する必要がある 1 つだけではなく、スプライトシート全体のパスが挿入されるためです。

クラス (またはその他のもの) に基づいて、スプライトシートの xml の特定の部分 (スプライト) を抽出して HTML マークアップに入れる方法はありますか? 私の唯一の考えは、スプライトシートを手動で分割し、各スプライトパス文字列を配列/オブジェクトに入れ、js (おそらくラファエル) を使用してインラインマークアップを記述し、ホバーカラーを設定することです。しかし、それがどのような種類のオーバーヘッドを追加するのか、またはそれがすべきではないことを行うための本当に複雑な方法なのかどうかはわかりません.

4

1 に答える 1

1

1 つのアイデアは、スプライトシートをインラインにして、すべての異なるスプライト ID を指定し<svg:use>、次のように を使用してそれらを参照することです。

<html>
  <head>
    <title></title>
    <style type="text/css">
      #firstUseOfSprite1:hover{
        color:green;
      }
      #secondUseOfSprite1:hover{
        color:blue;
      }
      #sprite1{
        fill:currentColor;
        stroke:red;
        stroke-width:5px;
      }
      #defs{
        display:none;
      }</style>
  </head>
  <body>
    <!-- This is our "spritesheet" -->
    <svg id="defs">
      <defs>
        <rect width="50" height="20" id="sprite1"/>
        <circle r="20" id="sprite2"/>
      </defs>
    </svg>
    <p>Here we use the "sprite":</p>
    <div>
      <svg width="55" height="25">
        <use xlink:href="#sprite1" id="firstUseOfSprite1" x="2.5" y="2.5"></use>
      </svg>
    </div>
    <p>And here, we use it again:</p>
    <div>
      <svg width="55" height="25">
        <use xlink:href="#sprite1" id="secondUseOfSprite1" x="2.5" y="2.5"></use>
      </svg>
    </div>
  </body>
</html>

同じスプライトのさまざまな用途にさまざまなホバー エフェクトを適用することもできます。Firefox と Chrome では問題なく動作するようですが、Opera ではホバー効果が機能しません。IE9は試していません。

于 2012-11-22T00:10:31.440 に答える