TL; DR：我想使用几个平铺在SVG精灵表中的图标作为CSS背景图像，它们保持其纵横比，并自动缩放以填充父元素，仅使用SVG和CSS。请不要JavaScript
所以我有一个SVG格式的spritesheet，我用SVG-Edit和一些手写编码在记事本中组合。这是源代码：
<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。在spriteheet中定义单元格比我想要的更有帮助。以下是我在以下位置显示这些图标的页面：
<!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显示哪个图标。
我宁愿这个解决方案是严格的SVG和CSS;我不喜欢使用JavaScript库。我的目标是让我可以简单地定义单元格，并有一个特定的图标，我的目标是自动缩放以适应其容器，同时保持其宽高比。目前，为了使图标适合其父容器，它的宽度和高度需要明确定义，并且匹配父容器的宽度和高度。如果我更改父容器的宽度和高度，我也需要更改背景位置大小。
然后，有缩放的问题。使用此设置，SVG将缩放到要在屏幕上绘制的适当大小，但如果我决定使用浏览器的缩放进行缩放，则会像素化。这不是SVG应该如何工作。
我想我可以把每个图标放在自己的文件中，因为这似乎很好奇，但我只是喜欢使用精灵;它不仅节省了我几个服务器请求，只是很酷。
我知道SVG Icon Loader.这很酷，但它是一个我不想依赖的JavaScript文件。
我已经阅读了w3 SVG文档，MDN SVG文档以及SO上的以下线程：
Fit <svg> to the size of <object> container
…但即使如此，我还没有找到解决方案。
编辑：我忘了提及，这需要在IE9中工作。这是一个问题，我相信，但IE9的SVG支持是体面的，这就是为什么我选择SVG为这个项目。
解决方法
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.
不，你不能做得更容易。
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.
在Chromium 18它看起来很好 – 根本没有像素。
在我的测试浏览器列表(FF3.6 Opera 9.2 IE6)中，我没有看到我在Chromium中看到的内容
关于IE9，也许在engine的问题
