SVG viewport viewBox preserveAspectRatio (2)

数学/笛卡尔坐标系

一般的笛卡尔坐标系中，x=0,y=0坐标点在在图标的左下角。随着x的增加，点在坐标系中向右移动。随着x的减小，点在坐标系中向左移动。随着y增加，点在坐标系中向上移动。随着y减小，点在坐标系中向下移动。

Viewport

viewport 是一个非常重要的概念，它定义了 SVG 图形的可视区域。简单来说，viewport 就是你在屏幕上看到的 SVG 图形的“窗口”，它决定了图形的显示区域和缩放行为。

定义：

在 SVG 中，viewport 是通过 width 和 height 属性来定义的，这两个属性通常在 svg 元素中指定。例如：

<svg width="