pfan123/Articles

SVG坐标系和变换

pfan123 opened this issue · 0 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>元素 上使用 widthheight 属性确定视口的大小。
  • 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