Open YIXUNFE opened 8 years ago
这篇我们来学习一下 SVG 中的变换效果,有点类似 CSS 的 transform,但是 SVG 的变换是属性。
transform
当一个形状上应用了多个变换效果的时候,我们可以认为它将会经过一个变换序列以得到最终的呈现。变换序列中各变换项的顺序对最终的形状呈现有影响。
我们接着先来看一个例子:
<rect width="50" height="50" x="10" y="10" transform="translate(10, 20) scale(2)" style="stroke: black; fill: none" /> <rect width="50" height="50" x="10" y="10" transform="scale(2) translate(10, 20)" style="stroke: red; fill: none" />
这是最终效果:
上图中的网格间距 10 (像素),左上角顶点为原点 (0, 0)。
先应用移动(translate)的黑框矩形最终的位置在 (30, 40) 处,而先应用放大(scale)的红框矩形最终的位置在 (40, 60) 处。这表明了多个变换效果的不同顺序对于形状的最终效果有影响。
translate
scale
首先我们先明确下面 4 点:
其实在形状上应用的变换效果都不是直接作用在形状上,而是对整个坐标系的变换。
这样我们就可以解释上面的例子了:
黑框
translate(10, 20)
scale(2)
红框
文章一开始的表格中,我们提到了变换矩阵,通过使用 matrix(a b c d e f) 能够达到自定义的变换效果。我们可以通过一个简单公式获取最终的新坐标 x2 和 y2:
matrix(a b c d e f)
x2 = ax + cy + e y2 = bx + dy + f
矩阵图:
| a c e | | b d f | | 0 0 1 |
由于只有 2D 变换,矩阵的第三行值是固定的,所以 matrix 的参数只有 6 个。
matrix
学习 SVG(二)—— 变换
这篇我们来学习一下 SVG 中的变换效果,有点类似 CSS 的
transform
,但是 SVG 的变换是属性。效果列表
变换序列
当一个形状上应用了多个变换效果的时候,我们可以认为它将会经过一个变换序列以得到最终的呈现。变换序列中各变换项的顺序对最终的形状呈现有影响。
我们接着先来看一个例子:
这是最终效果:
上图中的网格间距 10 (像素),左上角顶点为原点 (0, 0)。
先应用移动(
translate
)的黑框矩形最终的位置在 (30, 40) 处,而先应用放大(scale
)的红框矩形最终的位置在 (40, 60) 处。这表明了多个变换效果的不同顺序对于形状的最终效果有影响。坐标轴变换
首先我们先明确下面 4 点:
其实在形状上应用的变换效果都不是直接作用在形状上,而是对整个坐标系的变换。
这样我们就可以解释上面的例子了:
黑框
translate(10, 20)
使其坐标系移动 (10, 20),其自身仍在移动后的坐标系 (10, 10) 处;scale(2)
使其坐标系放大 2 倍,(10, 10) 的顶点落在了放大前坐标系的 (20, 20)处;红框
scale(2)
使其坐标系放大 2 倍,(10, 10) 的顶点落在了放大前坐标系的 (20, 20)处;translate(10, 20)
使其坐标系移动 (10, 20),由于其坐标系已被放大,移动的距离相当于原坐标系 (20, 40) 的距离;变换矩阵
文章一开始的表格中,我们提到了变换矩阵,通过使用
matrix(a b c d e f)
能够达到自定义的变换效果。我们可以通过一个简单公式获取最终的新坐标 x2 和 y2:矩阵图:
由于只有 2D 变换,矩阵的第三行值是固定的,所以
matrix
的参数只有 6 个。参考:
Thanks