| 文章索引 |
|---|
| 蓝骑士SVG教程:SVG动态与动画 |
| 第一课 SVG的变形属性 |
| 第二课 SVG动画 |
| 第三课 结合JavaScript产生SVG动画 |
| 第四课 SVG鼠标事件 |
| 第五课 SVG键盘事件 |
| 第六课 动态插入SVG元素 |
| 所有页面 |
所有的SVG图片中的元素都有一个"变形"属性.通过设置和改变元素的值,我们能够移动和变形SVG图片中的元素.一个变形属性包含一系列的"变化",这些"变化"包括:
"矩阵"( (a)(b)(c)(d)(e)(f) )
"矩阵"定义了一个2*3的矩阵(或者看作六个数的一个数列). 它和元素相匹配.详细请参看下面其他"变化"的解释来理解.
"移动"( (tx)[(ty)] )
"移动"属性的设置将移动元素.(tx)的值沿着x轴,(ty)的值沿着y轴.在六数数列中(即一个矩阵),数列的最后两位为(tx)(ty).
"比例"( (sx)[(sy)] )
"比例"属性的设置将会从元素中心点根据(sx)(sy)的值放缩元素.如果(sy)没有被给出,那么它将默认为(sx)的值.例如,如果(sx)的值 是0.5,元素将会缩小到原始尺寸的50%.在六数数列中(即一个矩阵),(sx)和(sy)对应的是第一和第四位的数值.
如果要放缩元素而元素又不在中心点(0,0),那么你必须先将元素移动使元素中心在中心点,然后执行"比例',元素放缩后,再将元素移动回到原来的位置.例如,要把一个在(150,100)出的元素缩小到50%,你需要执行下列步骤:
1. "移动"(150,100)
2. "比例" .5
3. "移动"(-150,-100)
(请注意次序)
"旋转"( (rotate-angle) )
"旋转"属性的设置可以控制元素绕着中心点(0,0)旋转任意角度(rotate-angle).例如,如果角度值(rotate-angle)为45 度,元素将会顺时针旋转45度.就像在"比例"中我们做的,如果元素不在中心点,我们首先要将它移动到中心点,然后旋转,再将它移回原来的位置.
"x轴倾斜"
"x轴倾斜"将在中心点(0,0)把元素在x轴轴向倾斜一定角度(angle).在六数数列中(即一个矩阵),"x轴倾斜"角度(angle)在第三位以弧度表示.
"y轴倾斜"
"y轴倾斜"将在中心点(0,0)把元素在y轴轴向倾斜一定角度(angle).在六数数列中(即一个矩阵),"y轴倾斜"角度(angle)在第二位以弧度表示.
在下面的表中,在文本框键入不同变化的不同数值,然后点击add来查看它们的效果."变化"将会被累计,在下面的多行文本框中显示"变化"结果.点击reset可以取消"变化".
"""
***附js
