iT邦幫忙

DAY 4
0

HTML5 & CSS3系列 第 4

30天分享(6) - HTML5 <svg> 標籤

<svg> 跟 <canvans> 有一些相同之處,
它們都是處理網頁上的圖像,並且標籤本身只是個像是畫布的容器,必須寫入內容才會顯示畫面。

<svg> 跟 <canvans> 的不同為以下幾點:

<canvans> 是由 javascript 控制圖形的產生,
<svg> 則是使用類似標籤的方式去控制圖形。

<canvans> 是以畫素處理,所以當 javascript 將圖形畫好,
會把圖形轉存成圖片,並且瀏覽器的畫面不會主動隨文件更新。

<svg> 所繪製的圖形是向量格式,可以自由縮放不會造成圖形鋸齒與模糊,
甚至在更動文件之後,圖形會隨之改變。

兩個有各自的用途,熟悉不同之處就可以妥善的運用,
以下為 <svg> 的用法 :

<svg width="400" height="180">
<rect x="50" y="20" width="150" height="150"
style="fill:orange;stroke:yellow;stroke-width:5;" />
</svg>

rect 代表繪製方形,將 X、Y 軸以及寬高設定好後,就能用 CSS 去修改圖形樣式。

再示範個比較複雜的圖形 :

<svg width="400" height="200">
<polygon points="100,10 40,198 190,78 10,78 160,198"
style="fill:yellow;stroke:none;stroke-width:5;fill-rule:evenodd;" />
</svg>

polygon points 是以點來連接圖形,只要標出每個點的 X、Y 軸並用空格隔開即可。

CSS 裡屬性 - fill : 填色。
stroke : 筆畫。
stroke-width : 筆畫寬度。
fill-rule : 填色方式, 共有 nonzero 、 evenodd 、inherit 三種方式,都可以嘗試看看。


上一篇
30天分享(5) - HTML5 <video> 標籤
下一篇
30天分享(7) - HTML5 <object> & <embed> 標籤
系列文
HTML5 & CSS328

尚未有邦友留言

立即登入留言