SVG 入門 : 基本圖形繪製

SVG 入門 : 基本圖形繪製

簡介:

SVG 可縮放式向量圖形 ( SVG , Scalable Vector Graphics )

是前端工程師不可錯過得技術,不只因 圖片向量 使圖片不會因放大縮小而失真外,SVG 為原本不足的 HTML 帶入了新的概念 — 利用標籤來做圖 從簡單的直線、曲線、圓形、矩形,到複雜的任意路徑、填充樣式、座標轉換與動畫,我們可以利用標籤的形式來完成

而且因 SVG 的圖片是由 標籤 組成,所以我們可以對圖片裡的任何物件進行操作,也可以配合 Css 與 javaScript 達到更多的效果與互動

入門:

個人認為 實做 是最好的學習途徑, 我們可以重最簡單的圖形繪製開始

SVG 標籤

在網頁中插入 SVG 圖形

<svg>
.......
</svg>

接下來我們就可以直接在 SVG 標籤裡,利用它所提供的標籤做出一些基本圖形

基本圖形

光是運用以上的標籤,就可以製作出一些簡單的圖形了

上一下個人作品:

補充 :

個人在製作的過程中,可能會碰到的問題

不知道要當前位置的座標位置 :

可使用此 套件 來協助

不知道 貝茲曲線 概念 :

可查看此 文章