.icon.arrow-down
{
    background-image: url( 'images/spritesheet.svg#arrow-down' );
}

我正在使用：直接在SVG文件中定位,以便在组合的SVG spritesheet中定位特定层(或“组”).

<?xml version="1.0" encoding="utf-8" ?>
<svg class="icon" id="icon" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="50px" height="50px" viewBox="0 0 50 50">
    <defs>
        <style>
            rect,line { shape-rendering: crispEdges; }
            svg .icon { display: none; }
            svg .icon:target { display: inline; }
        </style>
    </defs>

    <!-- Arrows -->
    <g class="icon" id="arrow-down" transform="translate(0,12.5)">
        <path fill="#F00" d="M 0,0 50,0 25,25 z" />
    </g>
    <g class="icon" id="arrow-up" transform="translate(0,25 50,25 25,0 z" />
    </g>
    ...
</svg>

这适用于Firefox和IE9,但在Chrome中似乎忽略了#profile部分.但是,直接在浏览器中使用目标ID转到SVG表会产生正确的图像.

这是Chrome处理方式中的错误：目标是背景图像吗？

我试图避免将所有内容分成他们自己的文件,因此只下载了一个资源,但我不知道它是否可能.

请注意图标在Chrome中是如何显示的,但在其他浏览器中是如此：http://jsfiddle.net/sYL5F/1/