SVG 坐标和 viewBox

SVG 坐标

没有指定单位默认为px

viewport

viewport是 SVG 图像的可见区域。一个 SVG 图像在逻辑上可以是你想要的无限制的宽度和高度，但一次只能看到svg空间的特定部分。这个当前可见的区域称为viewport。

您可以使用元素的width和height属性指定视口的大小<svg>。下面是一个例子：

<span style="background-color:#f0f0f0"><span style="color:#000000"><svg width="500" height="300"></svg>
</span></span>

此时viewport的左上角刚好是svg空间的（0，0），右下角刚好是（width， height）。

svg画布上元素的默认单位为px。

那么viewbox又是什么呢？

如果你想重新定义没有单位的坐标在<svg>内的含义。您可以使用该viewBox属性执行此操作。下面是一个例子：

<span style="background-color:#f0f0f0"><span style="color:#000000"><svg width="500" height="200" <strong>viewBox="0 0 50 20"</strong> ><rect x="20" y="10" width="10" height="5"style="stroke: #000000; fill:none;"/></svg>
</span></span>

本示例创建<svg>一个宽度为 500 像素、高度为 200的元素。的viewBox属性<svg>包含四个值。这些值定义了<svg>元素的viewbox。含义分别是视图框的x y width height。

在这种情况下，视图框开始于(0,0)，并且具有50宽*20高。这意味着，<svg>元素内部的500 x 200 像素空间的值，使用从0,0 到50,20的坐标系表示。换句话说，<svg>内部形状的坐标中的每 1 个单位对应于宽度的 500/50 = 10 个像素，高度的 200/20 = 10 个像素。这就是为什么 x 位置为 20，y 位置为 10 的矩形实际上位于200,100，其宽度 (10) 和高度 (5) 对应于宽100 像素和高50 像素。

其它文献解释：

The viewBox attribute defines the position and dimension, in user space, of an SVG viewport.

The value of the viewBox attribute is a list of four numbers:

min-x, min-y, width and height. The numbers separated by whitespace and/or a comma, which specify a rectangle in user space which is mapped to the bounds of the viewport established for the associated SVG element (not the browser viewport).

SVG 图形的viewport由 viewBox 属性以及 svg 标签中的宽度和高度属性指定。

如果不指定 width和height，SVG 元素会占用可用的空间（就像 HTML 元素一样）。

如果没有给出测量单位，则显示系统的单位适用 - 像素适用于显示器上的浏览器。

<svg 宽度 = "1000" 高度 = "500">...
</svg>

SVG宽度和高度也可以 - 类似于 CSS - 以 em、ex、pt、cm、mm 和百分比指定。

SVG 坐标系的零点位于左上角。

下图是width="48" height="48" viewBox="0 0 48 48"的svg渲染效果

同样的内容把viewBox减半后，下图是width="48" height="48" viewBox="0 0 24 24"的svg渲染效果

0，0 代表viewport的左上坐标，24，24代表viewport在svg坐标系中的宽和高。svg元素的width="48" height="48"则是这个viewport放到用户坐标系中，被拉伸（映射）后的坐标。

下面的蓝框就指定了viewbox视窗

如果我们用负值偏移图形的原点，则对象将向右/向下移出 viewBox。

增加宽度/高度会使对象变小，减少宽度/高度会放大 viewBox 中的对象。