SVG坐标系和变换

[pfan123]

SVG 指可伸缩矢量图形 (Scalable Vector Graphics)，是使用 XML 来描述二维图形和绘图程序的语言。在深入了解 SVG 过程中 ， 若能很好的理解 SVG 坐标系统和坐标变换，有助于我们更好的使用 SVG 做相关项目。

坐标系统

网格

SVG 使用的坐标系统或者说网格系统，和Canvas用的差不多（所有计算机绘图都差不多）。这种坐标系统是：以页面的左上角为(0,0)坐标点，坐标以像素为单位，x轴正方向是向右，y轴正方向是向下。

<rect x="0" y="0" width="100" height="100" />

定义一个矩形，即从左上角开始，向右延展100px，向下延展100px，形成一个100*100大的矩形。

viewport 、 viewBox、preserveAspectRatio属性

• 视口（viewport）：文档使用的画布区域，表示SVG可见区域的大小，通常可以在 <svg>元素 上使用 width 和 height 属性确定视口的大小。
• viewBox：允许指定一个给定的一组图形伸展以适应特定的容器元素。这个属性值由4个数值组成，viewBox = <min-x> <min-y> <width> <height>， 分别代表想要叠加在视口上的用户坐标系统的最小x坐标、最小y坐标、宽度和高度。（可以理解为 SVG 内元素定位的真实坐标系统）

<svg width="1024px" height="1024px" viewBox="0 0 80 80">
  <rect x="10" y="20" width="40" height="40" style="stroke: black; fill: none"/>
</svg>

• preserveAspectRatio：可以指定被缩放的图像相对视口的对齐方式，以及是希望它适配边缘还是要裁减。该属性的模型为:

preserveAspectRatio = "alignment [meet | slice]"

alignment ：指定轴和位置，由一个x对齐方式和一个y对齐方式（min, mid, max）组合而成。默认为xMidYMid 。

y对齐	xMin	xMid	xMax
yMin	xMinYmin 视口左侧边缘、顶部边缘对齐	xMidYmin 视口水平中心、顶部边缘对齐	xMaxYmin 视口右侧边缘、顶部边缘对齐
yMid	xMinYmid 视口左侧边缘、垂直中心	xMidYmid 视口水平中心、垂直中心	xMaxYmid 视口右侧边缘、垂直中心
yMax	xMinYmax 视口左侧边缘、底部边缘对齐	xMidYmax 视口水平中心、底部边缘对齐	xMaxYmax 视口右侧边缘、底部边缘对齐

meet ：缩小图像以适配可用的空间。
slice ：裁减图像不适合视口的部分。

坐标变换

SVG 元素可以通过缩放，移动，倾斜和旋转来变换。类似 HTML 元素使用 CSS transform 来变换，但也有些差异与复杂度，比如 SVG 中使用 <g> 标签创建分组也可以进行组嵌套，组内的标签继承属性，使用transform属性定义坐标变换，可以使组内的元素进行整体变换。

transform属性

tranform 属性用来对一个元素声明一个或多个变换。它输入一个带有顺序的变换定义列表的<transform-list>值，每个变换定义由空格或逗号隔开。

<rect width="50" height="50" x="10" y="10" transform="translate(10, 20) scale(2)" style="stroke: black; fill: none" />

变换	描述
translate(x, y)	按照指定的 x 和 y 值移动用户坐标系统。如果没有指定 y 值，默认 0。
scale(factor1, factor2)	使用指定的 factor1 和 factor2 乘以所有的用户坐标系统。比例值可以是小数或者负数。
scale(factor)	和 scale(factor, factor) 相同。
rotate(angle)	旋转用户坐标，中心点为 (0, 0)。
rotate(angle, x, y)	旋转用户坐标，中心点为 (x, y)。
skewX(angle)	根据指定的 angle 倾斜所有 x 坐标。
skewY(angle)	根据指定的 angle 倾斜所有 y 坐标。
matrix(a b c d e f)	设置 6 个值变换矩阵。

变换矩阵

SVG 元素缩放，移动，倾斜和旋转的变换方式，其实原理都是通过 matrix(a b c d e f) 矩阵变换达到的自定义效果。可以通过一个简单线性方程获得变换后的新坐标 x2 和 y2：

x2 = ax + cy + e
y2 = bx + dy + f

矩阵图：

| a c e |
| b d f |
| 0 0 1 |

Other Resources

matrix.js

线性代数拾遗（一 ）：线性方程组、向量方程和矩阵方程

svg transfrom