svg: 座標系統變換

笛卡爾座標系統轉換

若是總其餘系統傳輸數據到SVG, 可能必須處理使用笛卡爾座標表示數據的矢量圖形。點(0, 0)位於畫布的左下角，y座標向上遞增。y軸與SVG的默認約定"上下相反"，所以須要從新計算座標。

以下示例：

<svg width="200px" height="200px" viewbox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
 <g transform="translate(0, 100) scale(1, -1)">
    <line x1="0" y1="0" x2="100" y2="0" style="stroke: black" />
    <line x1="0" y1="0" x2="0" y2="100" style="stroke: black" />
    
    <polygin points="40 40, 100 40, 70 70, 40 70" style="fill: grey; stroke: black" />
  </g>
<svg>

SVG變換

translate(x, y): 按照指定的x和y值移動用戶座標系統
scale(xFactor, yFactor): 使用指定的xFactor和yFactor乘以全部的用戶座標系統。比例值能夠是小數或者負值
scale(factor): 和scale(xFactor, yFactor)相同
rotate(angle): 按照指定的angle旋轉用戶座標。旋轉中心爲原點(0, 0)。在默認座標系統中，旋轉角度按順時針方向遞增，水平線的角度爲0度
rotate(angle, centerX, centerY): 按照指定的angel旋轉用戶座標。旋轉中心由centerX和centerY指定
skewX(angle): 根據指定的angle傾斜全部x座標。從視覺上講，這會讓垂直線出現角度
skewY(angle): 根據指定的angle傾斜全部y座標。從視覺上講，這會讓水平線出現角度