SVG坐标系和变换
pfan123 opened this issue · comments
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 |
