> For the complete documentation index, see [llms.txt](https://htmltutorial.linwebs.tw/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://htmltutorial.linwebs.tw/3/3-4.md). # 3-4 HTML5 SVG元素 #### svg向量圖 > 使用``來插入svg檔的向量圖 ```markup Linwebs Logo SVG ``` #### SVG畫布各瀏覽器版本支援度 | | chrome | IE | FireFox | Safari | Opera | | ------- | ------ | --- | ------- | ------ | ----- | | Support | 4.0 | 9.0 | 3.0 | 3.2 | 10.1 | #### svg畫布 > 使用``來建立svg向量檔的圖片，有別於一般的點陣圖，向量圖檔為向量所繪製，放大不會失真 > `width="..."`指定向量圖的寬度\ > `height="..."`指定向量圖檔的高度 ```markup ``` #### svg圓形 > 使用``的``於svg向量圖中繪製圓形 > `cx="..."`指定圓心X座標\ > `cy="..."`指定圓心Y座標\ > `r="..."`指定圓的半徑\ > `fill="..."`指定圓形的填滿顏色 ```markup ``` #### svg橢圓形 > 使用``的``於svg向量圖中繪製橢圓形 > `cx="..."`指定中心X座標\ > `cy="..."`指定中心Y座標\ > `rx="..."`、`ry="..."`指定X、Y軸邊界與中心的距離\ > `fill="..."`指定圓形的填滿顏色 ```markup ``` #### svg矩形 > 使用``的``於svg向量圖中繪製矩形 > `width="..."`指定矩形的寬度\ > `height="..."`指定矩形的高度\ > `x="..."`指定最左方X座標\ > `y="..."`指定最上方Y座標\ > `fill="..."`指定矩形的填滿顏色 ```markup ``` #### svg直線 > 使用``的``於svg向量圖中繪製直線 > `x1="..."`指定第一個點的X座標\ > `y1="..."`指定第一個點的Y座標\ > `x2="..."`指定第二個點的X座標\ > `y2="..."`指定第二個點的Y座標\ > `style="..."`指定線條樣式\ > `stroke="..."`為線條顏色\ > `stroke-linecap="..."`指定為圓滑角\ > `stroke-width="..."`指定線條的粗細寬度 ```markup ``` #### svg折線 > 使用``的``於svg向量圖中繪製折線 > `points="..."`指定轉折點的座標，X座標與Y座標使用空格分隔，不同的座標採用逗點「,」分隔\ > `style="..."`為指定樣式 ```markup ``` #### svg多邊形 > 使用``的``於svg向量圖中繪製多邊形 > `points="..."`指定轉折點的座標，X座標與Y座標使用空格分隔，不同的座標採用逗點「,」分隔\ > `style="..."`為指定樣式 ```markup ``` #### svg動畫 > 使用``的``於svg向量圖中的元素中加入動畫效果 > `attributeName="..."`指定移動座標軸為x或y\ > `from="..."`指定為起始位置\ > `to="..."`指定為停止位置\ > `dur="..."`指定為播放一次動畫所需的時間\ > `repeatCount="..."`指定為重複播放次數 ```markup ``` #### SVG學習資源 【 網頁 】w3school.com ( 英文版 ) :