使用CSS背景为SVG添加图片精灵（国旗精灵）时显示空白的问题

首先，这是SVG元素和HTML元素在CSS背景渲染上的差异导致的问题——空的<svg>标签即使设置了宽高和背景，部分浏览器也不会渲染背景（因为SVG容器本身没有可渲染的内容，浏览器可能跳过了背景绘制步骤）。而HTML元素（比如<span>）不存在这个问题，因为它们是纯粹的CSS盒子。

下面给你几个可行的解决方案：

方案1：给SVG添加viewBox并填充透明内容 #

给空的SVG标签添加viewBox属性（匹配你的CSS宽高），再加入一个透明的矩形元素，让SVG容器有可渲染的内容，这样背景就能正常显示了：

<svg class="flag" viewBox="0 0 32 32">
  <!-- 透明矩形触发背景渲染 -->
  <rect width="100%" height="100%" fill="transparent" />
</svg>

你的原有CSS可以保持不变：

.flag {
  display: inline-block;
  width: 32px;
  height: 32px;
  background: url('../images/flags.png') no-repeat;
  /* 示例：美国国旗的位置，根据你的精灵图调整 */
  background-position: -32px -64px;
}

方案2：改用SVG内部元素实现精灵图（更符合SVG规范） #

如果你想完全用SVG的方式实现精灵图，可以定义一个<pattern>元素，把国旗精灵图作为图案，然后用<rect>填充这个图案：

<svg width="0" height="0" style="display: none;">
  <!-- 定义图案精灵 -->
  <defs>
    <pattern id="flag-pattern" width="32" height="32" patternUnits="userSpaceOnUse">
      <image href="../images/flags.png" width="640" height="480" /> <!-- 这里填精灵图的实际宽高 -->
    </pattern>
  </defs>
</svg>

<!-- 实际使用的国旗SVG -->
<svg class="flag" viewBox="0 0 32 32">
  <rect width="100%" height="100%" fill="url(#flag-pattern)" transform="translate(-32, -64)" />
  <!-- translate的值对应CSS的background-position，比如background-position: -32px -64px 就对应translate(-32, -64) -->
</svg>

这种方式不需要额外的CSS背景设置，完全用SVG自身的特性实现，兼容性更好。

方案3：替换为HTML元素包裹SVG（最简单的妥协） #

如果不想修改SVG结构，你可以用一个HTML元素（比如<span>）包裹SVG，把背景样式应用到这个HTML元素上，SVG只作为占位符：

<span class="flag">
  <svg width="32" height="32"></svg>
</span>

CSS保持你原来的写法即可，这样既保留了SVG标签的存在，又利用了HTML元素可靠的背景渲染能力。

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