SVGスタック

スプライトを含む画像は、1つのHTTP要求で大量のアイコンとインターフェイス要素を一度にダウンロードするために無制限に使用されます。 ただし、シフトを計算してバックグラウンド位置に設定する必要があるため、使用するには多少の負担がかかります。 このような再カウントなしでは、スプライトを追加、削除、または再配置することはできません。 または、横から隣人をつまずかずにスプライトのサイズを変更します。



この問題を修正するにはどうすればよいですか？ さて、すべてのスプライトを重ねて表示し、表示をオフにしてから、必要なものだけを表示します。 私はそれが可能であったことを願っています...そして長い間私が望んでいた...そしてそれが起こりました（下から上に読んでください）：







いいね！ そして、すでにFirefoxで動作します。 同じ機能がOperaに追加される予定です： バグ「CORE-37596」 （それにつながるパブリックハイパーリンクが見つかりませんでした）。 埋め込み、iframe、オブジェクト、またはimg要素など、ブラウザーでより適切にサポートされているSVGスタックの代替がありますが、サイズ変更と配置が簡単なので 、背景画像の方が好きです。 他のブラウザがSVGスタックのサポートを追加することを期待しましょう。



それでは、 SVGスタックはどのように機能しますか？ 実際、非常に簡単です。 EricのSVGファイルのソースコードを見てください。







最初に、SVGファイル内の各アイコンに 一意の ID （ただし同じクラス ）を割り当て、次にすべてのアイコンを非表示にし、結果として選択されたものを表示するCSSコードを追加します：target 。 そして、 「background： url（icon.svg＃ ID ）」のように、URLのアンカー部分を使用してID をSVGファイルに転送できます 。



この手法を開発してくれた@erikdahlstromに感謝します。