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

Question

经过几次试验后，有一些关于SVG viewBox的东西我仍然不明白。如果我从以下示例中删除viewBox，则输出会变小。为什么会这样？我知道viewBox适合缩放，但我没有看到有任何可扩展的东西。路径的范围与svg的宽度/高度完全匹配：

<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缩放。