css - アスペクト比とスケーラビリティを維持しながら、SVGスプライトシートをCSS背景画像として使用する方法

Question

TL; DR：SVGスプライトシートに並べられたいくつかのアイコンをCSS背景画像として使用したいのですが、アスペクト比を維持し、SVGとCSSだけを使用して、親要素を埋めるために自動的に拡大縮小します。JavaScriptは使用しないでください。

そのため、 SVG-EditとNotepad++でのハンドコーディングを組み合わせて作成したSVG形式のスプライトシートがあります。ソースコードは次のとおりです。

<svg version="1.1"
  xmlns:svg="http://www.w3.org/2000/svg"
  xmlns="http://www.w3.org/2000/svg"
  width="600"
  height="400"
  viewBox="0 0 600 400">
  <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
  <title>chosen_sprite</title>
  <g>
    <title>Add</title>
    <rect fill="none" stroke-width="10" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="5" y="5" width="90" height="90" id="svg_1" stroke="#dcdcdc"/>
    <line id="svg_2" y2="50" x2="70" y1="50" x1="30" stroke-linecap="round" stroke-linejoin="null" stroke-dasharray="null" stroke-width="12" stroke="#00a00c" fill="none"/>
    <line id="svg_3" y2="30" x2="50" y1="70" x1="50" stroke-linecap="round" stroke-linejoin="null" stroke-dasharray="null" stroke-width="12" stroke="#00a00c" fill="none"/>
  </g>
  <g>
    <title>Delete</title>
    <rect fill="none" stroke-width="10" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="105" y="5" width="90" height="90" id="svg_1" stroke="#dcdcdc"/>
    <line id="svg_2" y2="70" x2="170" y1="30" x1="130" stroke-linecap="round" stroke-linejoin="null" stroke-dasharray="null" stroke-width="12" stroke="#ff0000" fill="none"/>
    <line id="svg_3" y2="30" x2="170" y1="70" x1="130" stroke-linecap="round" stroke-linejoin="null" stroke-dasharray="null" stroke-width="12" stroke="#ff0000" fill="none"/>
  </g>
  <g>
    <title>Expand Dark</title>
    <rect stroke="#505050" id="svg_1" height="90" width="90" y="5" x="205" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="10" fill="none"/>
    <line fill="none" stroke="#000000" stroke-width="12" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="round" x1="250" y1="65" x2="280" y2="35" id="svg_2"/>
    <line fill="none" stroke="#000000" stroke-width="12" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="round" x1="220" y1="35" x2="250" y2="65" id="svg_3"/>
  </g>
  <g>
    <title>Collapse Dark</title>
    <rect stroke="#505050" height="90" width="90" y="5" x="305" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="10" fill="none" id="svg_4"/>
    <line fill="none" stroke="#000000" stroke-width="12" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="round" x1="350" y1="35" x2="380" y2="65" id="svg_5"/>
    <line fill="none" stroke="#000000" stroke-width="12" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="round" x1="320" y1="65" x2="350" y2="35" id="svg_6"/>
  </g>
  <g>
    <title>Expand Green</title>
    <rect fill="none" stroke-width="10" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="405" y="5" width="90" height="90" id="svg_1" stroke="#dcdcdc"/>
    <line id="svg_2" y2="35" x2="480" y1="65" x1="450" stroke-linecap="round" stroke-linejoin="null" stroke-dasharray="null" stroke-width="12" stroke="#00a00c" fill="none"/>
    <line id="svg_3" y2="65" x2="450" y1="35" x1="420" stroke-linecap="round" stroke-linejoin="null" stroke-dasharray="null" stroke-width="12" stroke="#00a00c" fill="none"/>
  </g>
  <g>
    <title>Collapse Green</title>
    <rect fill="none" stroke-width="10" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="505" y="5" width="90" height="90" id="svg_1" stroke="#dcdcdc"/>
    <line id="svg_2" y2="65" x2="580" y1="35" x1="550" stroke-linecap="round" stroke-linejoin="null" stroke-dasharray="null" stroke-width="12" stroke="#00a00c" fill="none"/>
    <line id="svg_3" y2="35" x2="550" y1="65" x1="520" stroke-linecap="round" stroke-linejoin="null" stroke-dasharray="null" stroke-width="12" stroke="#00a00c" fill="none"/>
  </g>
  <g>
    <title>Search</title>
    <circle id="svg_9" r="32" cy="140" cx="60" stroke-width="8" stroke="#000000" fill="none"/>
    <line id="svg_11" y2="167.5" x2="32.5" y1="190" x1="10" stroke-linecap="round" stroke-linejoin="null" stroke-dasharray="null" stroke-width="12" stroke="#000000" fill="none"/>
  </g>
  <g>
    <title>Search 2</title>
    <rect id="svg_10" stroke="#505050" height="90" width="90" y="105" x="105" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="10" fill="none"/>
    <circle r="25" cy="142.5" cx="157.5" stroke-width="8" stroke="#000000" fill="none" id="svg_7"/>
    <line y2="165" x2="135" y1="180" x1="120" stroke-linecap="round" stroke-linejoin="null" stroke-dasharray="null" stroke-width="12" stroke="#000000" fill="none" id="svg_8"/>
  </g>
</svg>

それはうまく機能し、私が望むように見えます。

問題はCSSです。スプライトシートでセルを定義するのは、私が望むよりも少し面倒です。これらのアイコンを表示しているページは次のとおりです。

<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<html>
<head>
<style>

* {padding: 0px; margin: 0px; outline: 1px solid rgba(0,0,0,0.1);}

html {width: 100%; height: 100%;}

body {width: 100%; height: 100%;}

.svgSprite {
    background-image: url('./svgicons/form_icons_sprite.svg');
    background-repeat: no-repeat;
    background-size: 600%;
}

.svgSprite.add {
    background-position: 0px 0px;
    width: 12px;
    height: 12px;
}

.svgSprite.delete {
    background-position: -16px 0px;
    width: 16px;
    height: 16px;
}

.svgSprite.expandDark {
    background-position: -24px 0px;
    width: 12px;
    height: 12px;
}

.svgSprite.collapseDark {
    background-position: -36px 0px;
    width: 12px;
    height: 12px;
}

.svgSprite.expandGreen {
    background-position: -48px 0px;
    width: 12px;
    height: 12px;
}

.svgSprite.collapseGreen {
    background-position: -60px 0px;
    width: 12px;
    height: 12px;
}

.svgSprite.search {
    background-position: 0px -12px;
    width: 12px;
    height: 12px;
}

.svgSprite.search2 {
    background-position: -16px -16px;
    width: 16px;
    height: 16px;
}

</style>
</head>

<body>
<div class="svgSprite add"></div>
<div class="svgSprite delete"></div>
<div class="svgSprite expandDark"></div>
<div class="svgSprite collapseDark"></div>
<div class="svgSprite expandGreen"></div>
<div class="svgSprite collapseGreen"></div>
<div class="svgSprite search"></div>
<div class="svgSprite search2"></div>
</body>

</html>

基本的に、スプライトシートのセルを定義し、各divにスプライトシートから表示するアイコンを指示するために使用するCSSを単純化する簡単な方法があるかどうかを知りたいです。

このソリューションは厳密にSVGとCSSであることが望ましいです。JavaScriptライブラリの使用には興味がありません。セルを簡単に定義し、アスペクト比を維持しながら、コンテナに合わせて自動的に拡大縮小することを目指している特定のアイコンを使用できるようにすることを目指しています。現在、アイコンを親コンテナに合わせるには、アイコンの幅と高さを明示的に定義し、親コンテナの幅と高さに一致させる必要があります。親コンテナの幅と高さを変更する場合は、背景位置のサイズも変更する必要があります。

次に、スケーリングの問題があります。この設定では、SVGは画面に描画される適切なサイズに拡大縮小されますが、ブラウザーのズームを使用してズームすることにした場合、ピクセル化されます。これは、SVGが機能することになっている方法ではありません。

それぞれのアイコンを独自のファイルに入れることができると思います。それはうまく機能しているように見えるからですが、私はスプライトを使用するのが本当に好きです。それは私にいくつかのサーバー要求を節約するだけでなく、それはただクールです。

私はSVGアイコンローダーを知っています。かなりかっこいいですが、私が頼りたくないもう1つのJavaScriptファイルです。

私はすでにw3SVGドキュメント、MDN SVGドキュメント、およびSOに関する次のスレッドを読みました。

SVGとスプライトシート

SVGを背景画像として使用する

...しかし、それでも、私は解決策を見つけることができませんでした。

編集：私は言及するのを忘れました、これはIE9で動作する必要があります。これは少し問題だと思いますが、IE9のSVGサポートはまともです。そのため、このプロジェクトにSVGを選択しました。

score 7 · Accepted Answer

アイコンのサイズが同じ場合は、次の操作を実行できます。

アイコンをスプライトに水平にパックします（アイコンが別々のファイルにある場合はsvg-spriteを使用します）。
background-size: auto 100%;ターゲットセレクターに設定します。
ターゲット要素のwidth、heightまたはfont-sizeスケールを設定します。

.icon {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="64" height="16" viewBox="0 0 64 16"> <circle fill="blue" cx="8" cy="8" r="8"/> <circle fill="red" cx="24" cy="8" r="8"/> <circle fill="yellow" cx="40" cy="8" r="8"/> <circle fill="green" cx="56" cy="8" r="8"/> </svg>');
    background-repeat: no-repeat;
    background-size: auto 100%;
    display: inline-block;
}
.icon.small {
    height: 1em;
    width: 1em;
}
.icon.medium {
    height: 2em;
    width: 2em;
}
.icon.large {
    height: 4em;
    width: 4em;
}
.icon_1 {
    background-position: 0 0;
}
.icon_2 {
    background-position: 33.33% 0;
}
.icon_3 {
    background-position: 66.67% 0;
}
.icon_4 {
    background-position: 100% 0;
}

<span class="icon icon_1 small"></span>
<span class="icon icon_1 medium"></span>
<span class="icon icon_2 large"></span>

score 4 · Accepted Answer

基本的に、スプライトシートのセルを定義し、各divにスプライトシートから表示するアイコンを指示するために使用するCSSを単純化する簡単な方法があるかどうかを知りたいです。

~~いいえ、簡単にはできません。~~

この記事をお試しください

次に、スケーリングの問題があります。この設定では、SVGは画面に描画される適切なサイズに拡大縮小されますが、ブラウザーのズームを使用してズームすることにした場合、ピクセル化されます。これは、SVGが機能することになっている方法ではありません。

Chromium 18では、見た目はかなりきれいです。ピクセル化はまったくありません。

テストブラウザリスト（FF3.6 Opera 9.2 IE6）で、Chromiumで見たものが表示されませんでした

そしてIE9については、おそらくエンジンの問題

css - アスペクト比とスケーラビリティを維持しながら、SVGスプライトシートをCSS背景画像として使用する方法

2 に答える 2

Related

Reference