SVG中的平移、旋轉和縮放在不同的引數條件下，體現出不同的效果:

1、如果直接用x、y指定了圖形的座標（在我的理解該座標實際是圖形相對座標，如果沒有通過transform屬性設定座標平移，該座標是相對畫布起始位置座標，如果設定了座標平移則為相對平移後坐標位置的偏移），所有的變形均受到x、y座標值影響；如下程式碼示例：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="800" height="800">
    <g  transform="translate(100,100)scale(0.8,0.8)">       
        <rect width="100" height="50" fill="blue"></rect>
    </g>
    <rect x="50" y="50" transform="translate(200,200)scale(1.2,1.2)" width="200" height="50" fill="red" />   
</svg>
 

縮放倍數為1.2和1時實際看到的效果：受縮放的影響，矩形不僅長、寬跟隨縮放係數變化，圖形位置也跟隨縮放係數變化，說明縮放係數要影響引數  x、y；相應的使用rotate引數時，也會受到x、y係數的影響。

建議：為保證圖形變換效果，不要設定圖形起始值，通過transform屬性的translate引數設定圖形相對座標原點的平移位置即可；

2、旋轉 ：如果採用transform屬性設定了translate引數，則旋轉中心為translate設定位置，示例如下：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="800" height="800">
    <g  transform="translate(100,100)rotate(90)">
        <text fill="red">hello</text>
    </g> 
</svg>
 

當設定不同的旋轉角度時，始終以座標位置100,100為中心進行旋轉，其中旋轉按照rotate(angle,[x,y])格式設定引數，angle表示旋轉的目標角度（不表示旋轉角度哈，如：-90表示逆時針從0度位置逆時針方向選裝90度，不是當前位置逆時針旋轉90度），[x,y]表示旋轉中心的相對座標；如下示例程式碼：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="800" height="800">
	<g  transform="translate(200,200)rotate(90)">
		<rect width="200" height="100" fill="red" ></rect>
	</g>
</svg>
 

該示例程式碼的旋轉中心為200,200,90度旋轉完成後，矩形左上角座標為（100，200），右上角座標位置為(200,200)

如果設定translate（x1,y1）引數又設定了rotate的旋轉中心引數，則實際的旋轉中心為x1+x,y1+y,以下示例以矩形中心為中心點旋轉的程式碼示例：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="800" height="800">
	<g  transform="translate(200,200)rotate(90,100 50)">
		<rect width="200" height="100" fill="red" ></rect>
	</g>
</svg>

旋轉中心位置為：300，250