为何HTML中<use>标签渲染的SVG尺寸不符？如何解决？

当使用<use>标签复用SVG元素时，设置的宽高（如20x20）实际渲染尺寸常出现偏差，比如示例中设置200x100却得到54x54，设置30x30的三角形也无法匹配预期尺寸。

原因分析 #

核心问题来自SVG的缩放规则和视口配置：

• 被复用SVG存在固有宽高比：
  • 带viewBox的SVG（如#graph），固有比例由viewBox的宽高比决定（1200/400=3:1）；
  • 无viewBox的SVG（如#polyline），固有比例由自身width和height决定（400/210≈1.904:1）。
• 浏览器默认会保持原SVG的宽高比缩放，当<use>设置的宽高比与原SVG不一致时，会自动调整尺寸适配比例，导致显示值和设置值不符。
• 外层<svg>容器未明确设置width、height和viewBox时，浏览器会使用默认视口尺寸（通常300x150），进一步加剧缩放异常。

解决方案 #

方案1：强制控制缩放行为，明确外层视口 #

给外层<svg>设置目标宽高和viewBox，通过preserveAspectRatio参数控制缩放逻辑：

• 严格按设置宽高拉伸（忽略原比例）：

<!-- 复用#graph为200x100 -->
<svg width="200" height="100" viewBox="0 0 200 100">
  <use href='#graph' width="200" height="100" preserveAspectRatio="none" />
</svg>

<!-- 复用#polyline为30x30 -->
<svg width="30" height="30" viewBox="0 0 30 30">
  <use href='#polyline' width="30" height="30" preserveAspectRatio="none" />
</svg>

preserveAspectRatio="none"会强制内容填满视口，完全无视原SVG比例。

• 保持原比例并适配视口：

<!-- 复用#graph为200x100，保持3:1比例，自动适配高度 -->
<svg width="200" height="100" viewBox="0 0 200 100">
  <use href='#graph' width="200" height="100" preserveAspectRatio="xMidYMid meet" />
</svg>

meet为默认值，确保内容完整显示；slice则会裁剪超出部分以填满视口，按需选择即可。

方案2：修改被复用SVG为响应式 #

去掉被复用SVG的width和height，仅保留viewBox，让它自适应外层容器尺寸：

修改#graph：

<svg id='graph' viewBox="0 0 1200 400" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <path d="M300,200 h-150 a150,150 0 1,0 150,-150 z" fill="red" stroke="blue" stroke-width="5" />
  <path d="M275,175 v-150 a150,150 0 0,0 -150,150 z" fill="yellow" stroke="blue" stroke-width="5" />
</svg>

修改#polyline：

<svg id='polyline' viewBox="0 0 400 210">
  <path d='M150 0 L75 200 L225 200 Z' />
</svg>

复用示例：

<!-- 直接设置外层SVG宽高，<use>无需额外配置 -->
<svg width="200" height="100">
  <use href='#graph' />
</svg>

<svg width="30" height="30">
  <use href='#polyline' />
</svg>

方案3：设置匹配原比例的宽高 #

如果需要严格保持原SVG比例，计算出对应的宽高值：

• #graph比例为3:1，若高度设为100，宽度需设为300；
• #polyline比例≈1.904:1，若宽度设为30，高度需设为≈15.76。

示例：

<svg width="300" height="100">
  <use href='#graph' width="300" height="100" />
</svg>

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