SVG 入門 : 基本圖形繪製
![SVG 入門 : 基本圖形繪製](https://bonze-blog.s3.ap-northeast-1.amazonaws.com/wp-content/uploads/2017/06/25004133/Letters_SVG.svg_.png)
簡介:
SVG 可縮放式向量圖形 ( SVG , Scalable Vector Graphics )
是前端工程師不可錯過得技術,不只因 圖片向量 使圖片不會因放大縮小而失真外,SVG 為原本不足的 HTML 帶入了新的概念 — 利用標籤來做圖 從簡單的直線、曲線、圓形、矩形,到複雜的任意路徑、填充樣式、座標轉換與動畫,我們可以利用標籤的形式來完成
而且因 SVG 的圖片是由 標籤 組成,所以我們可以對圖片裡的任何物件進行操作,也可以配合 Css 與 javaScript 達到更多的效果與互動
入門:
個人認為 實做 是最好的學習途徑, 我們可以重最簡單的圖形繪製開始
SVG 標籤
在網頁中插入 SVG 圖形
<svg>
.......
</svg>
接下來我們就可以直接在 SVG 標籤裡,利用它所提供的標籤做出一些基本圖形
基本圖形
光是運用以上的標籤,就可以製作出一些簡單的圖形了
上一下個人作品:
補充 :
個人在製作的過程中,可能會碰到的問題
不知道要當前位置的座標位置 :
可使用此 套件 來協助
不知道 貝茲曲線 概念 :
可查看此 文章