SVG中DOM元素的偏移與縮放都是基於SVG元素的左上角，所以如何理解與計算SVG中元素的真實位置就比較難，下面的例子都以圓(circle)為例。
1.縮放
假定縮放的比例為s，執行縮放后，圓的圓心坐標由(cx, cy)變為(cx * s, cy * s)
2. 偏移
假定偏移的距離為(x1, y1), 執行單純的偏移后，圓的圓心坐標由(cx, cy)變為(cx + x1, cy + y1)
3. 先偏移后縮放
先偏移后縮放的transform表達式為
transform="translate(100, 0) scale(2) "
1
則現在圓心的真實位置為(cx * s + x1, cy * s + y1)
4. 先縮放后偏移
先偏移后縮放的transform表達式為
transform="scale(2) translate(100, 0)"
1
則現在圓心的真實位置為((cx + x1) * s, (cy + y1) * s)
<svg width="600" height="600"> <!-- 用作參照 --> <circle cx="50" cy="50" stroke="blue" stroke-width="1" r="50" fill="blue"/> <!-- 先偏移后縮放 --> <circle cx="50" cy="50" stroke="green" stroke-width="1" r="50" fill="green" transform="translate(100, 0) scale(2) "/> <!-- 先縮放后偏移 --> <circle cx="50" cy="50" stroke="red" stroke-width="1" r="50" fill="red" transform="scale(2) translate(100, 0) "/> <!-- 用作參照,用於查看實際的圓心位置 --> <circle cx="200" cy="100" stroke="yellow" stroke-width="1" r="50" fill="yellow"/> <circle cx="300" cy="100" stroke="yellow" stroke-width="1" r="50" fill="yellow"/></svg>
實際效果如下：
結論
一定要注意縮放與偏移的順序，否則結果將大相徑庭，另外如果想要像CSS3一樣以圓心進行縮放，必須要組合使用偏移。