SVG viewBox宽高比不匹配时的缩放与位移异常问题咨询

核心原因 #

你观察到的现象是SVG默认开启的preserveAspectRatio属性规则导致的，并非viewBox仅支持等比缩放。

基础概念梳理 #

• 视口（viewport）：你给<svg>标签定义的width="100mm" height="100mm"是渲染的物理容器，固定为宽高比1:1的正方形。
• viewBox：你定义的用户坐标系可视范围，相当于在虚拟坐标系上划定一个取景框，最终要把取景框内的内容映射到物理视口上渲染。

默认规则说明 #

preserveAspectRatio的默认值为xMidYMid meet，该规则会强制保持viewBox内容的原始宽高比：

1. 计算两个方向的缩放比例：视口尺寸 / 对应viewBox的尺寸
2. 取更小的那个缩放比例作为全局等比缩放值，保证整个viewBox内容都能完整显示在视口内
3. 缩放完成后，将整个viewBox内容按照定义的对齐规则在视口内对齐（默认水平、垂直都居中）

你修改后的viewBox="0 0 177.95 377.95"宽高比为1:2，和视口的1:1不匹配：

• Y方向缩放比例 = 100mm / (377.95用户单位对应100mm) = 1
• X方向如果不等比缩放的话比例应该是100mm / (177.95用户单位对应约47mm) ≈ 2.12
• 按照默认规则取更小的缩放值1，X方向内容总宽度只有约47mm，比视口的100mm窄，所以会在水平方向居中对齐，最终表现为矩形沿X轴向右位移，没有拉伸。

实现不等比拉伸的方法 #

如果需要让viewBox内容完全拉伸填满视口，忽略宽高比，只要给<svg>标签添加preserveAspectRatio="none"属性即可，示例代码如下：

<svg xmlns="http://www.w3.org/2000/svg" width="100mm" height="100mm" version="1.1" viewBox="0 0 177.95 377.95" preserveAspectRatio="none">
  <rect x="0" width="189" height="189" stroke="black" stroke-width="6" fill="red"/>
</svg>

修改后矩形会沿X轴拉伸填满视口，不会出现位移。

问题结论 #

viewBox本身支持不等比缩放，默认的等比限制、对齐逻辑是preserveAspectRatio属性的默认配置控制的，你可以根据需求修改该属性调整适配行为。

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