這篇文章將為大家詳細(xì)講解有關(guān)svg實(shí)現(xiàn)坐標(biāo)系統(tǒng)變換的方法，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)是一家專注于網(wǎng)站制作、成都網(wǎng)站設(shè)計(jì)與策劃設(shè)計(jì),金平網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)十余年,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:金平等地區(qū)。金平做網(wǎng)站價(jià)格咨詢:028-86922220

笛卡爾坐標(biāo)系統(tǒng)轉(zhuǎn)換

如果總其他系統(tǒng)傳輸數(shù)據(jù)到SVG, 可能必須處理使用笛卡爾坐標(biāo)表示數(shù)據(jù)的矢量圖形。點(diǎn)(0, 0)位于畫布的左下角，y坐標(biāo)向上遞增。y軸與SVG的默認(rèn)約定"上下相反"，因此需要重新計(jì)算坐標(biāo)。

如下示例：

<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值移動用戶坐標(biāo)系統(tǒng)
scale(xFactor, yFactor): 使用指定的xFactor和yFactor乘以所有的用戶坐標(biāo)系統(tǒng)。比例值可以是小數(shù)或者負(fù)值
scale(factor): 和scale(xFactor, yFactor)相同
rotate(angle): 按照指定的angle旋轉(zhuǎn)用戶坐標(biāo)。旋轉(zhuǎn)中心為原點(diǎn)(0, 0)。在默認(rèn)坐標(biāo)系統(tǒng)中，旋轉(zhuǎn)角度按順時(shí)針方向遞增，水平線的角度為0度
rotate(angle, centerX, centerY): 按照指定的angel旋轉(zhuǎn)用戶坐標(biāo)。旋轉(zhuǎn)中心由centerX和centerY指定
skewX(angle): 根據(jù)指定的angle傾斜所有x坐標(biāo)。從視覺上講，這會讓垂直線出現(xiàn)角度
skewY(angle): 根據(jù)指定的angle傾斜所有y坐標(biāo)。從視覺上講，這會讓水平線出現(xiàn)角度

關(guān)于svg實(shí)現(xiàn)坐標(biāo)系統(tǒng)變換的方法就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

本文名稱：svg實(shí)現(xiàn)坐標(biāo)系統(tǒng)變換的方法-創(chuàng)新互聯(lián)
URL鏈接：http://jinyejixie.com/article2/jjooc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信小程序、ChatGPT、靜態(tài)網(wǎng)站、自適應(yīng)網(wǎng)站、手機(jī)網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)