如何让<use>引用的SVG居中缩放且绝对定位父元素适配其尺寸？

要实现SVG居中缩放且绝对定位的父元素尺寸适配，直接用下面的CSS配置就能搞定：

• 父元素设置：
  保持绝对定位，用inline-flex让父元素自动收缩包裹SVG，同时通过flex布局让SVG在父元素里居中对齐，边框这类样式会自动包裹缩放后的SVG。
• SVG设置：
  直接改width属性控制缩放比例（height设为auto保持宽高比），显式加preserveAspectRatio: xMidYMid meet确保SVG内容在自身内部居中，不会出现偏移。

完整代码示例：

<div class="parent">
   <svg class="visual" viewBox="0 0 30 30">
      <use href="#ref" />
   </svg>
</div>

<!-- 隐藏的引用SVG，实际项目里可以放在合适位置 -->
<svg style="display: none;">
  <symbol id="ref" viewBox="0 0 30 30">
    <!-- 这里是你要引用的SVG内容，示例用了矩形和圆形 -->
    <rect x="0" y="0" width="30" height="30" fill="#ddd" />
    <circle cx="15" cy="15" r="10" fill="#2196F3" />
  </symbol>
</svg>

.parent {
  position: absolute;
  border: 1px solid #333; /* 示例边框，用来验证父元素尺寸是否适配 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.visual {
  width: 60px; /* 这里改成你要的缩放尺寸，比如60就是放大2倍 */
  height: auto;
  preserveAspectRatio: xMidYMid meet;
}

为啥这么做？ #

• 父元素用inline-flex既会自动跟着SVG的缩放尺寸变，又能让SVG始终居中，解决了之前改width时内容偏移的问题
• 直接改SVG的width属于修改布局尺寸，父元素会自动适配，不像transform: scale()只改视觉大小、不影响布局
• preserveAspectRatio确保SVG内容在自身内部居中，缩放时不会出现内容截断或偏移

如果需要动态调缩放比例，直接改width值就行，父元素尺寸会自动同步。

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