如何使用SVG Sprite Sheet作为CSS background-image,同时保持宽高比和可扩展性

TL; DR：我想使用几个平铺在SVG精灵表中的图标作为CSS背景图像，它们保持其纵横比，并自动缩放以填充父元素，仅使用SVG和CSS。请不要JavaScript

所以我有一个SVG格式的spritesheet，我用SVG-Edit和一些手写编码在记事本中组合。这是源代码：@H_404_3@

<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>

它工作正常，看起来像我想要的方式。@H_404_3@

问题是CSS。在spriteheet中定义单元格比我想要的更有帮助。以下是我在以下位置显示这些图标的页面：@H_404_3@

<!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.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>

基本上，我想知道是否有一种更容易的方法来定义spritesheet中的单元格，并简化CSS，用于告诉每个div从spritesheet显示哪个图标。@H_404_3@

我宁愿这个解决方案是严格的SVG和CSS;我不喜欢使用JavaScript库。我的目标是让我可以简单地定义单元格，并有一个特定的图标，我的目标是自动缩放以适应其容器，同时保持其宽高比。目前，为了使图标适合其父容器，它的宽度和高度需要明确定义，并且匹配父容器的宽度和高度。如果我更改父容器的宽度和高度，我也需要更改背景位置大小。@H_404_3@

然后，有缩放的问题。使用此设置，SVG将缩放到要在屏幕上绘制的适当大小，但如果我决定使用浏览器的缩放进行缩放，则会像素化。这不是SVG应该如何工作。@H_404_3@

我想我可以把每个图标放在自己的文件中，因为这似乎很好奇，但我只是喜欢使用精灵;它不仅节省了我几个服务器请求，只是很酷。@H_404_3@

我知道SVG Icon Loader.这很酷，但它是一个我不想依赖的JavaScript文件。@H_404_3@

我已经阅读了w3 SVG文档，MDN SVG文档以及SO上的以下线程：@H_404_3@

SVG & Spritesheets@H_404_3@

Fit <svg> to the size of <object> container@H_404_3@

Using SVG as background image@H_404_3@

…但即使如此，我还没有找到解决方案。@H_404_3@

编辑：我忘了提及，这需要在IE9中工作。这是一个问题，我相信，但IE9的SVG支持是体面的，这就是为什么我选择SVG为这个项目。@H_404_3@

解决方法

Basically,I want to know if there’s an easier way to define the cells in the spritesheet and simplify the CSS I use to tell each div which icon to display from the spritesheet.@H_404_3@

不，你不能做得更容易。@H_404_3@

尝试this article@H_404_3@

Then,there’s the problem of scaling. With this setup,the SVG scales to the appropriate size to be drawn on-screen,but if I decide to zoom using my browser’s zoom,it pixelates. This is not how SVG is supposed to work.@H_404_3@

在Chromium 18它看起来很好 – 根本没有像素。@H_404_3@

在我的测试浏览器列表(FF3.6 Opera 9.2 IE6)中，我没有看到我在Chromium中看到的内容@H_404_3@

关于IE9，也许在engine的问题@H_404_3@

如何使用SVG Sprite Sheet作为CSS background-image,同时保持宽高比和可扩展性

解决方法

猜你在找的CSS相关文章