现在我们准备好开始扭曲我们美丽的图像了。但是首先,让我们正式地介绍<g>
元素。利用这个助手,你可以把属性赋给一整个元素集合。实际上,这是它唯一的目的。一个示例:
<g fill="red"> <rect x="0" y="0" width="10" height="10" /> <rect x="20" y="0" width="10" height="10" /> </g>
输出两个红色矩形。
所有接下来的变形都会用一个元素的transform
属性总结。变形可以连缀,只要把它们连接起来就行,用空格隔开。
平移
你能把元素移动一段距离,甚至你可以根据相应的属性定位它。translate()
变形方法专门效力于这个目的。
<rect x="0" y="0" width="10" height="10" transform="translate(30,40)" />
该示例将呈现一个矩形,移到点(30,40),而不是出现在点(0,0)。
如果没有指定第二个值,它默认被赋值0。
旋转
旋转一个元素是相当常见的任务。使用rotate()变形就可以了:
<rect x="20" y="20" width="20" height="20" transform="rotate(45)" />
该示例显示了一个方形,旋转了45度。rotate()
的值是用角度数指定的。
斜切
利用一个矩形制作一个斜菱形。可用skewX()
变形和skewY()
变形。每个需要一角度以确定元素斜切到多远。
缩放
scale()变形
改变了元素的尺寸。它需要两个数字,作为比率计算如何缩放。0.5表示收缩到50%。如果第二个数字被忽略了,它默认等于第一个值。
用matrix()实现复杂变形
所有上面的变形可以表达为一个2x3的变形矩阵。组合一些变形,可以直接用matrix(a, b, c, d, e, f)变形
设置结果矩阵,利用下面的矩阵,它把来自上一个坐标系统的坐标映射到新的坐标系统:
请看关于SVG变形文档的具体实例。关于该属性的详细信息可以在SVG推荐标准上找到。
坐标系统上的效果
如果使用了变形,你会在元素内部建立了一个新的坐标系统,应用了这些变形,你为该元素和它的子元素指定的单位可能不是1:1像素映射。但是依然会根据这个变形进行歪曲、斜切、转换、缩放操作。
<g transform="scale(2)"> <rect width="50" height="50" /> </g>
上面示例中的结果矩形将是100x100px,如果你使用了比如说userSpaceOnUse等属性,将出现更吸引人的效果。
SVG嵌在SVG内部
比之HTML,SVG允许你无缝嵌入别的svg元素。因此你可以利用内部svg
元素的属性viewBox
、属性width
和属性height
简单创建一个新的坐标系统。
<svg xmlns="https://www.w3.org/2000/svg" version="1.1"> <svg width="100" height="100" viewBox="0 0 50 50"> <rect width="50" height="50" /> </svg> </svg>
以上示例基本上跟它上面的示例有同样的效果,也就是矩形将是指定的两倍大。