SVG中<use>引用精灵图与父级svg尺寸不一致如何修复

出现尺寸不匹配的核心原因有两个：

1. 误用HTML盒模型规则控制SVG元素：给<use>加的绝对定位+top/left/right/bottom:0的拉伸写法完全无效——SVG内部元素遵循SVG视口坐标系渲染，不支持普通HTML元素的盒模型定位拉伸规则。
2. 外层引用的<svg>缺少viewBox属性：<use>引用<symbol>时，外层svg不会自动继承symbol上定义的viewBox，没有viewBox就无法建立内部坐标系和外层svg宽高的缩放映射关系，最终只会按图标原始尺寸渲染，剩下的svg区域留空，看起来就是外层svg比内部use大。

1. 删掉所有给<use>写的定位相关CSS，这部分代码没有任何作用。
2. 给外层引用图标的<svg>标签加上和对应symbol完全一致的viewBox属性，浏览器会自动将symbol内容缩放适配整个svg的尺寸，不需要额外控制use的样式。
3. （可选）如果觉得图标四周有多余留白，可以把symbol的viewBox从0 0 44 44改成2 2 40 40，刚好匹配内部路径偏移2px后的实际绘制区域，消除视觉上的内边距。

修复后可直接运行的代码 #

svg {
  width: 200px;
  height: 200px;
}

<svg width="0" height="0" class="hidden">
  <symbol version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 44 44" id="facebook-hover">
    <title>ThirdParty/Facebook/2xpng1. Liquorice</title>
    <defs>
      <polygon id="path-1" points="0.001 0 40 0 40 40 0.001 40"></polygon>
    </defs>
    <g id="ThirdParty/Facebook/1.-Liquorice" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
      <g id="Group-3" transform="translate(2.000000, 2.000000)">
        <g id="Clip-2"></g>
        <path d="M37.793,0 L2.207,0 C0.989,0 0.001,0.988 0.001,2.208 L0.001,37.792 C0.001,39.012 0.989,40 2.207,40 L21.379,40 L21.379,24.532 L16.173,24.532 L16.173,18.476 L21.379,18.476 L21.379,14.022 C21.379,8.856 24.539,6.042 29.145,6.042 C30.697,6.038 32.249,6.118 33.793,6.276 L33.793,11.676 L30.621,11.676 C28.111,11.676 27.621,12.862 27.621,14.614 L27.621,18.468 L33.621,18.468 L32.841,24.524 L27.585,24.524 L27.585,40 L37.793,40 C39.011,40 40.001,39.012 40.001,37.792 L40.001,2.208 C40.001,0.988 39.011,0 37.793,0" id="Fill-1" fill="#002E88" mask="url(#mask-2)"></path>
      </g>
    </g>
  </symbol>
</svg>

<!-- 给外层svg添加匹配的viewBox即可实现填满效果 -->
<svg viewBox="0 0 44 44">
  <use xlink:href="#facebook-hover"></use>
</svg>

SVG的尺寸缩放完全依赖viewBox定义的内部坐标系和外层svg宽高的映射规则，只要外层svg的viewBox和引用symbol的viewBox保持一致，不管svg宽高设成多少，内部图标都会自动等比拉伸填满整个容器，不需要额外给<use>标签加任何尺寸或定位样式。

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