SVG 缩放和 viewBox

Question

这是一个简单的 SVG 文件：

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

这会按预期呈现左上角位于原点的 100mm x 100mm 盒子。

如果我将视图框更改为：

 viewBox="0 0 177.95 177.95"

然后框按比例放大，左上角仍然在原点，正如预期的那样。

但是，如果我像这样只改变视图框的宽度：

  viewBox="0 0 177.95 377.95"

然后方框未缩放但是沿X轴移动。

我以为只有viewbox的前两个参数影响了翻译？还有为什么盒子没有在 X 方向拉伸？

只有在 X 和 Y 方向上的缩放比例相同时，视图框缩放才能正常工作吗？

谢谢！

Answer 1

视口在 SVG 的实际尺寸（嵌入框架）中的缩放方式由 preserveAspectRatio 属性控制。

请参阅 Sara Soueidan 的 MDN entry and/or refer too Understanding SVG Coordinate Systems and Transformations。

SVG 缩放和 viewBox

SVG Scaling and viewBox

svg