SVG viewBox 属性背后的魔力是什么？

Question

试了几次之后，SVG viewBox 还是有些不明白。如果我从以下示例中删除 viewBox，输出会变小。为什么会这样？我知道 viewBox 可以缩放以适合，但我看不出有什么可以缩放的。路径的范围与 svg 的 width/height 完全匹配：

<svg width=595pt height=806pt  viewBox="0 0 595 806" overflow="visible">
<g style="
fill: none;
stroke: red; "  > 
    <path d="
      M  0.000 0.000
      L  595.000 806
      L  595.000 0.000
      L  0.000 806
 "/>
</g>
</svg>

在这里自己试一试：https://jsfiddle.net/7zomyrp9/

Answer 1

viewBox 表示我们将 595 个像素映射到 x 方向上的 595 个点。每 the CSS3 specification

1pt = 1/72th of 1in
1px = 1/96th of 1in

因此 px:pt 比率为 96:72 或 1.3333333:1

因此，当您移除 viewBox 时，绘图的大小会根据该因素发生变化。

同样的推理适用于 y 缩放。

SVG viewBox 属性背后的魔力是什么？

What's the magic behind the SVG viewBox attribute?

svg

coordinate-systems

viewbox