如何使用HTML与CSS拆分SVG精灵图并实现单个精灵的无损缩放

SVG与PNG精灵图表现差异的核心原因 #

PNG为位图，作为背景时默认按自身原始像素尺寸渲染，容器宽高对应的就是显示的视口区域，偏移计算直接基于原始图尺寸即可。SVG为矢量图，默认作为背景时会自适应容器尺寸，整张SVG会缩放至填满容器，因此会出现你观察到的宽高对应整张精灵图尺寸的问题。

可行实现方案 #

方案1：background-size 适配（无需修改原SVG文件）

如果你的精灵图为12×12排列，单个精灵原始尺寸为12×12：

• 总精灵图的宽高为单个精灵的12倍，因此将background-size设为1200% 1200%，即可让缩放后的单个精灵刚好匹配容器尺寸
• 直接调整容器的width、height即可任意无损放大图标，无需修改其他属性

代码示例：

<span class="Lettuce"></span>

.Lettuce {
  display: inline-block;
  /* 可自定义为任意需要的尺寸，比如200px */
  width: 200px;
  height: 200px;
  background: url(Ingredients.svg) 0 0 no-repeat;
  /* 12列/行对应1200%，如果是N列就设为N*100% */
  background-size: 1200% 1200%;
}

如果要取其他位置的精灵，调整background-position的偏移值即可，比如第二行第一个的偏移就是0 -200px（对应200px的容器尺寸）。

方案2：SVG 标签定义视口（管理更清晰）

直接在你的Ingredients.svg文件内部，给每个精灵定义专属的view节点，指定每个精灵的坐标和视口范围：

<!-- 放在SVG文件的开头，defs标签附近即可 -->
<view id="lettuce" viewBox="0 0 12 12" />
<view id="tomato" viewBox="12 0 12 12" />
<!-- 其他精灵依次按坐标添加 -->

调用时直接在URL后加对应id锚点即可：

.Lettuce {
  display: inline-block;
  width: 200px;
  height: 200px;
  background: url(Ingredients.svg#lettuce) center / cover no-repeat;
}

该方案无需计算偏移，后续新增精灵只要在SVG里加对应view节点即可，维护更方便。

缩放控制说明 #

两种方案都支持直接通过外层元素的类修改width/height，或者用transform: scale()进行缩放，完全不需要修改SVG内部的id、属性等内容，符合你的需求。

内容的提问来源于stack exchange，提问作者Tim