【公告】網站目前停止所有的課程訂閱服務,原有學員權益不受影響,造成不便還請見諒,我們正在打造更多課程以及圖書,包含 Python 為主的課程主題,未來將會合併且擴充目前的課程內容,提供全新課程訂閱服務,感謝學員的支持。
【公告】《Entity Framework 實務精要》 絕版優惠學習活動,是針對最後一批少量書籍絕版的短期特別活動,只提供 20 個名額(剩 7 名),教學影片要在今年暑假過後才會重新開放訂閱,並沒有提供之前單獨購書的讀者,還請見諒, 如果您需要教學影片,屆時再請參與,也感謝讀者學員的支持,我們正在開發更多的教學內容,歡迎與我們一起努力。
《Entity Framework 實務精要》 絕版優惠學習活動》

svg 標籤與座標系統

SVG 透過座標點定義圖形,因此在開始之前,必須先瞭解 SVG 所使用的座標系統。SVG 座標系統以水平方向為 x 軸,愈往右座標值愈大,垂直方向為 y 軸,愈往下座標值愈大。



持續來看這組 svg 標籤的配置:



我們透過以下的標籤配置來產生其中淺藍色的 svg 區域。

<svg style="background-color:#ecf0fc;" width="600" height="180>

</svg>

以此配置為例,最左邊的 x 座標值從  0 開始,最右邊終點則是 600 ,也就是 width 設定的屬性值。最上方的 y 座標值開始為 0 ,終點為 180 ,也就是 height 屬性值。我們可以得到矩形 SVG  區域四個角的 x, y 座標值。



回到上述配置的 svg 標籤,以 (x,y) 作表示,這四個點的實際座標值:
  • 左上  (0,0)
  • 右上  (600,0)
  • 左下  (0,180)
  • 右下  (600,180)
表示如下:



現在我們可以透過 x 與 y 座標值進行任意定位,例如將 width 與 height 分別除以 2 之後得到的座標值  (300,90)  ,指向繪圖區域的中心點。



有了初步認識,接下來就可以透過  x, y 座標值的設定,描繪任何想要呈現的圖形了,例如要在區域中描繪一條從左上角開始到右下角結束的對角線,只要將  (0,0) 與  (600,180) 兩組座標設定給 SVG 的 line 標籤即可完成對角線的描繪。





沒有留言: