我正在为一个网站构建一个图标系统，并从 png 和 font-icon sprites 转向 SVG。
我需要它在所有主要浏览器 (IE9+) 上工作，并且理想情况下希望使用片段标识符，或者作为第二好的选择，内联。我已经进行了广泛的研究，但那里并没有很多，而且从我读到的内容来看，SVG 精灵并不是特别敏感。
对于片段标识符，使用 img 标签，我必须将宽度/高度设置为与视图框相同的大小。增加 img 标签上的尺寸最终会显示一些下一个精灵。我希望能够使用百分比值，以便精灵片段填充父容器。
我只是想确认这是不可能的，我找不到任何表明我的想法是错误的。
【问题讨论】：
这是很有可能的，并且相对容易实现。 SVG 是矢量图形，因此，如果处理得当，它将成为您网站上响应速度最快的图形。
按预期设置您的 SVG 文件，但将每个精灵放入带有自己标识符的 <g> 标记中。
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<g class="sprite" id="circle">
<ellipse cy="50" cx="50" ry="45" rx="45" stroke-width="5" stroke="#00ff00" fill="#00ff00" fill-opacity="0.75" />
</g>
<g class="sprite" id="square">
<rect y="5" x="5" width="90" height="90" stroke-width="5" stroke="#ff0000" fill="#ff0000" fill-opacity="0.75" />
</g>
<g class="sprite" id="triangle">
<path d="M20,7 L92,50 L6,93 z" stroke-width="5" stroke="#0000ff" fill="#0000ff" fill-opacity="0.75" />
</g>
</svg>
添加一些 CSS 说明只需要显示 rargeted 一个
<defs>
<style><![CDATA[
.sprite { display: none; }
.sprite:target { display: inline; }
]]></style>
</defs>
然后，您可以在需要时使用 img 标记或背景元素等来调用它们。
您可以在此处找到完整解释的文章：
【讨论】：