基本变换

所有的变形都会用一个元素的transform属性。变形可以连缀，只要把它们连接起来就行，用空格隔开。

平移

你能把元素移动一段距离，甚至你可以根据相应的属性定位它。translate()变形方法专门效力于这个目的。

<svg width="310" height="100" style="border:1px solid;">
  <rect x="0" y="0" width="10" height="10" />
  <rect x="0" y="0" width="10" height="10" transform="translate(30,40)" />
</svg>

旋转

旋转一个元素是相当常见的任务。使用 rotate() 变形就可以了：

<svg width="310" height="100" style="border:1px solid;">
  <rect x="20" y="20" width="20" height="20"/>
  <rect x="20" y="20" width="20" height="20" transform="rotate(45)" />
</svg>

斜切

利用一个矩形制作一个斜菱形。可用skewX()变形和skewY()变形。每个需要一角度以确定元素斜切到多远。

<svg width="310" height="100" style="border:1px solid;">
  <rect x="20" y="20" width="20" height="20"/>
  <rect x="20" y="20" width="20" height="20" transform="skewX(45)" />
  <rect x="20" y="20" width="20" height="20" transform="skewY(45)" />
</svg>

缩放

scale() 变形改变了元素的尺寸。它需要两个数字，作为比率计算如何缩放。0.5 表示收缩到 50%。如果第二个数字被忽略了，它默认等于第一个值。

<svg width="310" height="100" style="border:1px solid;">
  <rect x="20" y="20" width="20" height="20"/>
  <rect x="20" y="20" width="20" height="20" transform="scale(.5)" />
  <rect x="20" y="20" width="20" height="20" transform="scale(2)" />
</svg>

组合

<svg width="310" height="100"   viewBox="-40 0 150 100" style="border:1px solid;">
  <g fill="grey"
     transform="rotate(-10 50 100)
                translate(-36 45.5)
                skewX(40)
                scale(1 0.5)">
    <path id="heart" d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z" />
  </g>
  <use xlink:href="#heart" fill="none" stroke="red"/>
</svg>