身為前端工程師的大家對HTML5熟悉嗎?SVG向量圖也都會了嗎?
何謂 SVG?
因為以往網頁設計常使用的圖片檔如 jpg、png、gif 等都是點陣圖模式，但是時下流行的 RWD 響應式網頁可隨著螢幕調整網頁布局，點陣圖隨著螢幕大小縮放就會有模糊失真的疑慮，因此HTML5的向量的 SVG 是不錯的解決方法。SVG（Scalable Vector Graphics，可縮放向量圖形）是 W3C 制定的開放性網路標準之一，此圖片格式再網頁中能以向量格式呈現圖片。設計師可先在 Adobe Illusrator 中畫好向量圖形並存成 SVG 檔，在放在網頁中。運用方式就跟 .jpg、.png、.gif 等圖片檔一樣，但不同的是 SVG 檔不會因尺寸的改變而失真，日後要修改時也可直接開啟檔案修改，相當方便。
如何置入 SVG 影像到網頁中?
如同 .jpg、.png、.gif 的方式，SVG 圖檔使用 img 標籤被置入到 HTML5 檔中，如下方所示：<img src="image.svg" alt="" height="300" />
使用 SVG 畫圖形
要用 SVG 畫出簡單的圖形，首先前端工程師要使用 SVG 標籤製作「畫布」。要賦予其畫布的長寬 (width、height) 屬性，如下例所示：<svg width="1000" height="1000"></svg>
在此我們先舉「畫圓形」為例，如下所示：
<svg width="2000" height="2000">
<circle cx="80" cy="80" r="50" fill="magenta" />
</svg>
- - cx 圓心之ｘ軸座標
- - cy 圓心之 y 軸座標
- - r 半徑
- - fill 填滿色彩
- - stroke 圓形外框
結果如下所示：
See the Pen svg circle by Tedutw (@Tedutw) on CodePen.
同理， SVG 也可以用來「畫方形」。標籤中的「circle」要改成「rect」，半徑與圓心的屬性都要換成長與寬，原始碼與結果如下所示：
同理， SVG 標籤改成「line」，x1 與 y1 定義第一點的座標、x2 與 y2 定義第二點的座標，原始碼與結果如下所示：
三邊以上的摺線，前端 工程師可用 SVG 「polyline」(多點折線)標籤，並為五點定義座標分別為 10 10, 60 60, 110 10,160 60 與 210 10 原始碼與結果如下所示：
See the Pen svg polyline by Tedutw (@Tedutw) on CodePen.
SVG 繪製橢圓形 (ellipse) ，標籤屬性的下法與上述的「circle」類似，差別在於水平與垂直的半徑可以分別使用「rx」與「ry」來定義，原始碼與結果如下所示：
See the Pen svg ellipse by Tedutw (@Tedutw) on CodePen.
三邊以上的形狀，用 SVG 繪製多邊形 (polygon) 的原始碼與結果如下所示：：
See the Pen svg polygon by Tedutw (@Tedutw) on CodePen.
其他閱讀
前端工程師不能錯過的HTML5:Drag and Drop簡介(上)
前端工程師不能錯過的HTML5:瀏覽儲存器Web Storage
暑假快到了！與其讓兒子盲目拚學測，我寧可讓他先選擇人生方向~
想成為第二個馬斯克嗎?讓Python課程帶你進入自動駕駛車的行列!
神奇的Java課程-竟可讓人從零經驗到成為工程師不用一年!!?
人人都能是工程師！台灣 IT 培訓中心推「找到工作再付學費」專案，要試試嗎？
文章標籤
全站熱搜
留言列表
