SVG transform座標變換

2021-07-12 03:13:19 字數 2581 閱讀 1742

html transform和svg transform

一些基本的變換型別是一樣的,包括:位移translate, 旋轉rotate, 縮放scale, 斜切skew以及直接矩陣matrix。

但只侷限於2d層面的變換,svg似乎只支援二維變換,類似translatex, rotatex也都是不支援的,最重要的是中心點的預設值不同。

svg transform translate位移

html元素的偏移是相對自己的中心點(下圖左),svg元素的偏移是相對於左上角(下圖右)。

雖然兩者的相對位置不一樣,但是,對於單純地位移來講,無論你相對於那個點位置,實際偏移的位置都是一樣的,因此,從表現上講,兩者最終的位置看上去還是一樣的。

svg元素也能使用css3的transform進行變換(非ie瀏覽器),但是只能支援2d層面的幾個屬性,例如translatex(tx).translatey(ty)以及translatez(tz).translate(tx[, ty])則並不支援。

而且,多個引數值的時候,可以使用逗號,或者直接空格分隔,但是不能包含單位,下面這種無單位寫法才可以:

transform="translate(30 12)"

transform="translate(30, 12)"

另外,和css3的transform一樣,svg中的translate位移也是支援多宣告累加的。例如:

transform="translate(30 12) translate(30 12)"
等同於:

transform="translate(60 24)"
需要注意的是,倆個translate中間不要混有其他的transform變換。否則,最終的位移就不是簡單的相加了。

svg transform rotate旋轉

html元素的旋轉是相對自己的中心點,svg元素預設是svg左上角為中心變換的

svg transform 旋轉的引數依然沒有單位。

transform="rotate(45)"
具體語法為:rotate(angle[,x y]),這裡有個可選引數[,x y],這個引數[,x y]是用來變換中心點的。

svg元素預設是基於左上角的,

x="30"

y="30"

width="120"

height="90"

rx="10"

ry="10"

fill="#a0b3d6"

transform="rotate(45, 90 75)">

rect>

同樣的,rotate旋轉可以多個值並存

transform: rotate(45deg) rotate(-45deg);

transform="rotate(45) rotate(-45)"

需要注意的是,svg屬性的transform宣告的中心變換座標是不能共享的。

svg transform scale縮放

css控制的transform和svg元素屬性控制的transform的座標系統是不一樣的。乙個預設元素中心(下圖左),乙個是svg畫布左上角(下圖右)

svg中的縮放的語法就比較單純了,就scale(sx[, sy]), sx表示橫座標縮放比例,sy表示縱座標縮放比例。

當我們要實現svg元素居中縮放的效果,還需要使用translate手動偏移。

即先translate其中心點位置到元素的中心座標位置,然後縮放,然後座標再反方向還原回去。

例如,某元素中心點座標是(95, 75), 垂直縮放1.5倍的效果則是:

transform="translate(95 75) scale(1, 1.5) translate(-95 -75)"
svg transform skew斜切奇葩的是,svg transform skew斜切不支援skew(x[, y])這種語法,而只能是skewx或者skewy

同樣的,由於變換中心點的差異,css實現的變換和svg屬性變換往往最後的位置是不一樣的:

不僅如此,如果元素的中心點不是就是svg的左上角,則skewx(α1) skewx(α2)的最終位置和skewx(α1 + α2)是不一樣的(位移和旋轉不會這樣子)。

參考自:

gdal座標變換(x,y變經緯度)

最近因為一些原因需要讀取地理資料,我使用的工具是gdal,在處理資料的時候遇到一些小的問題,自己折騰了會兒,現在分享出來,避免大家浪費時間。include gdal priv.h include ogrsf frmts.h include gdal.h include ogr srs api.h i...

SLAM用到的相機模型 矩陣表示以及座標變換矩陣

說白了,單目相機就是針孔相機,需要建立三個座標系,現在來對這個簡單的針孔模型進行幾何建模。設 o x y z 為相機座標系,習慣上我們讓 z 軸指向相機前方,x 向右,y 向下。o 為攝像機的光心,也是針孔模型中的針孔。現實世界的空間點 p,經過小孔 o 投影之後,落在物理成像平面 o x y 上,...

MFC 螢幕座標 視窗座標 邏輯座標 物理座標

int nwidth getsystemmetrics sm cxscreen 螢幕寬度 int nheight getsystemmetrics sm cyscreen 螢幕高度 int cx getsystemmetrics sm cxfullscreen int cy getsystemmet...