SVG平移和旋轉

在SVG中可以對所畫的形狀進行平移(translate)運動，下面是一個平移的例子

<svg>
  <rect x="20" y="20" width="50" height="50"
      style="fill: red"/>

<rect x="20" y="20" width="50" height="50"
      style="fill: blue"
      transform="translate(75,25)" />
  </svg>

 

 在上面的例子中通過把<rect>矩形元素的transform屬性值設置為translate(75,25),使得原來的正方形（紅色）向右平移75像素，向下平移25像素，得到一個新的正方形（藍色）。

在SVG中也可以對所畫的形狀進行旋轉(rotate)運動，下面是一個旋轉的例子

 

<svg>
<rect x="20" y="20" width="40" height="40"
      style="stroke: blue; fill:none;"
        />

<rect x="20" y="20" width="40" height="40"
      style="fill: blue"
      transform="rotate(15)"
        />
  </svg>

 

 

 在這個例子中將原來的矩形（白色）沿着左上角順時針旋轉了15度，得到了新的藍色的矩形。當把15改成-15時將會沿着

左上角逆時針旋轉15度，效果如下：

 在上面旋轉的例子中是以矩形的左上角為中心旋轉的，如果不想以左上角為中心，而是自己指定旋轉中心

這可以在rotate函數中把旋轉中心的坐標也寫進去，例如：rotate(15, 40, 40)，意思是以(40,40)為中心旋轉15度

效果如下：

 

<svg>
<rect x="20" y="20" width="40" height="40"
      style="stroke: blue; fill:none;"
        />

<rect x="20" y="20" width="40" height="40"
      style="fill: blue"
      transform="rotate(45, 40, 40)"
        />
  </svg>