3-4 HTML5 SVG元素

svg向量圖

使用<img>來插入svg檔的向量圖

<img src="linwebs.svg" alt="Linwebs Logo SVG" />

SVG畫布各瀏覽器版本支援度

	chrome	IE	FireFox	Safari	Opera
Support	4.0	9.0	3.0	3.2	10.1

svg畫布

使用<svg>來建立svg向量檔的圖片，有別於一般的點陣圖，向量圖檔為向量所繪製，放大不會失真

width="..."指定向量圖的寬度 height="..."指定向量圖檔的高度

<svg width="500" height="500"></svg>

svg圓形

使用<svg>的<circle>於svg向量圖中繪製圓形

cx="..."指定圓心X座標 cy="..."指定圓心Y座標 r="..."指定圓的半徑 fill="..."指定圓形的填滿顏色

<svg width="200" height="200" />
    <circle cx="100" cy="100" r="50" fill="blue" />
</svg>

svg橢圓形

使用<svg>的<eclipse>於svg向量圖中繪製橢圓形

cx="..."指定中心X座標 cy="..."指定中心Y座標 rx="..."、ry="..."指定X、Y軸邊界與中心的距離 fill="..."指定圓形的填滿顏色

<svg width="200" height="200" />
    <ellipse cx="80" cy="60" rx="60" ry="40" fill="#aaf82c" />
</svg>

svg矩形

使用<svg>的<rect>於svg向量圖中繪製矩形

width="..."指定矩形的寬度 height="..."指定矩形的高度 x="..."指定最左方X座標 y="..."指定最上方Y座標 fill="..."指定矩形的填滿顏色

<svg width="200" height="200" />
    <rect width="100" height="100" x="20" y="20" fill="blue" />
</svg>

svg直線

使用<svg>的<line>於svg向量圖中繪製直線

x1="..."指定第一個點的X座標 y1="..."指定第一個點的Y座標 x2="..."指定第二個點的X座標 y2="..."指定第二個點的Y座標 style="..."指定線條樣式 stroke="..."為線條顏色 stroke-linecap="..."指定為圓滑角 stroke-width="..."指定線條的粗細寬度

<svg width="200" height="200" />
    <line x1="10" y1="10" x2="150" y2="100" style="stroke:#ff8e1c;stroke-linecap:round;stroke-width:20" />
</svg>

svg折線

使用<svg>的<polyline>於svg向量圖中繪製折線

points="..."指定轉折點的座標，X座標與Y座標使用空格分隔，不同的座標採用逗點「,」分隔 style="..."為指定樣式

<svg width="200" height="200" />
    <polyline points="50 100, 100 50, 150 100" style="fill:#ff1d00; stroke:#ffdc1c;stroke-linejoin:miter; stroke-width:20;stroke-linecap:round " />
</svg>

svg多邊形

使用<svg>的<polygon>於svg向量圖中繪製多邊形

points="..."指定轉折點的座標，X座標與Y座標使用空格分隔，不同的座標採用逗點「,」分隔 style="..."為指定樣式

<svg width="200" height="200" />
    <polygon points="100 100, 200 200, 300 0" style="fill:# 0080ff; stroke:#1cb9ff" />
</svg>

svg動畫

使用<svg>的<animate>於svg向量圖中的元素中加入動畫效果

attributeName="..."指定移動座標軸為x或y from="..."指定為起始位置 to="..."指定為停止位置 dur="..."指定為播放一次動畫所需的時間 repeatCount="..."指定為重複播放次數

<svg width="200" height="200" />
    <rect width="100" height="100" fill="blue" >
        <animate attributeName="x" from="0" to="300" dur="4" fill="freeze" repeatCount="2" />
    </rect>
</svg>

SVG學習資源

【 網頁 】w3school.com ( 英文版 ) : https://www.w3schools.com/html/html5_svg.asp