从Figma导出SVG制作堆叠图后，img引用图标无法填满设置宽高的问题

我来帮你分析下问题根源，以及给出具体的修复方案：

问题本质 #

你的堆叠SVG外层设置了viewBox="0 0 354 519"，这相当于一个超大画布，而内部#logo图标的viewBox只有0 0 20 20——当你用<img src="icons.svg#logo">引用时，浏览器会先加载整个外层SVG画布，再显示被:target命中的内部图标。此时img会按照外层354x519的画布比例缩放到你设置的20x20，内部20x20的图标在这个缩放后的画布上就变成了居中的一小块，自然出现大量空白。而直接插入内部SVG时，它的viewBox和img宽高完全匹配，所以能填满整个区域。

修复方案 #

方案1：给内部图标添加preserveAspectRatio属性 #

修改堆叠SVG里每个内部图标SVG的属性，加上preserveAspectRatio="xMidYMid slice"，以#logo为例：

<svg fill="none" viewBox="0 0 20 20" id="logo" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice">
  <path d="M18.01 5.694a9.092 9.092 0 01-3.718 12.316 9.053 9.053 0 01-5.352 1.02A9.097 9.097 0 015.694 1.976a9.07 9.07 0 018.06-.266 9.055 9.055 0 014.256 3.984z" stroke="url(#hpaint0_linear_0_497)"/>
  <defs>
    <linearGradient id="hpaint0_linear_0_497" x1=".756" y1="8.723" x2="20.965" y2="9.992" gradientUnits="userSpaceOnUse">
      <stop offset=".288" stop-color="#555248"/>
      <stop offset=".78" stop-color="#1B1A17" stop-opacity="0"/>
    </linearGradient>
  </defs>
</svg>

这个属性会让内部图标在外层画布被缩放时，自动裁剪并填满可用空间，这样img设置20x20后，图标就能完全填满区域，无需再加object-fit: cover。

方案2：改用标准的SVG Sprite（<symbol>+<use>）结构 #

:target的方式其实不是构建SVG图标库的标准做法，更推荐用<symbol>来定义图标，这样引用更灵活，也能从根源避免viewBox冲突问题。调整后的堆叠SVG结构如下：

<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: none;">
  <symbol id="logo" viewBox="0 0 20 20" fill="none">
    <path d="M18.01 5.694a9.092 9.092 0 01-3.718 12.316 9.053 9.053 0 01-5.352 1.02A9.097 9.097 0 015.694 1.976a9.07 9.07 0 018.06-.266 9.055 9.055 0 014.256 3.984z" stroke="url(#hpaint0_linear_0_497)"/>
    <defs>
      <linearGradient id="hpaint0_linear_0_497" x1=".756" y1="8.723" x2="20.965" y2="9.992" gradientUnits="userSpaceOnUse">
        <stop offset=".288" stop-color="#555248"/>
        <stop offset=".78" stop-color="#1B1A17" stop-opacity="0"/>
      </linearGradient>
    </defs>
  </symbol>
  <!-- 其他图标都用<symbol>定义在这里 -->
</svg>

然后在HTML中用<svg>+<use>来引用，替换原来的<img>：

<svg class="svg-logo-dims">
  <use href="icons.svg#logo"/>
</svg>

这种方式下，<svg>元素会直接继承你设置的.svg-logo-dims宽高，<symbol>的viewBox会自动适配这个尺寸，图标会完美填满整个区域，完全符合你在Figma里的布局效果。

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