首頁  >  文章  >  web前端  >  svg如何實現座標系統變換(附程式碼)

svg如何實現座標系統變換(附程式碼)

不言
不言原創
2018-08-02 14:44:562852瀏覽

這篇文章要跟大家介紹的內容是關於在react中使用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座標。從視覺上講,這會讓水平線出現角度

相關文章推薦:

svg path路徑的作用:svg path在網頁開發中的使用方法

在react中使用svg的各種方法總結(附程式碼)

以上是svg如何實現座標系統變換(附程式碼)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn