Skip to content

3-4.md

Latest commit

 

History

History
161 lines (101 loc) · 3.79 KB

3-4.md

File metadata and controls

161 lines (101 loc) · 3.79 KB

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圓形 {#du}

使用<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-xing}

使用<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-xing}

使用<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-xing}

使用<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-xing}

使用<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-xing}

使用<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-xing}

使用<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學習資源 {#html-yuan}

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