# 3-4 HTML5 SVG元素

#### svg向量圖

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

```markup
<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="..."`指定向量圖檔的高度

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

#### svg圓形 <a href="#du" id="du"></a>

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

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

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

#### svg橢圓形 <a href="#svg-xing" id="svg-xing"></a>

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

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

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

#### svg矩形 <a href="#svg-xing" id="svg-xing"></a>

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

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

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

#### svg直線 <a href="#svg-xing" id="svg-xing"></a>

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

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

```markup
<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折線 <a href="#svg-xing" id="svg-xing"></a>

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

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

```markup
<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多邊形 <a href="#svg-xing" id="svg-xing"></a>

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

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

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

#### svg動畫 <a href="#svg-xing" id="svg-xing"></a>

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

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

```markup
<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學習資源 <a href="#html-yuan" id="html-yuan"></a>

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://htmltutorial.linwebs.tw/3/3-4.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.