HTML 中的 SVG
您可以將 SVG 元素直接嵌入到 HTML 頁面中。
將 SVG 直接嵌入 HTML 頁面
下面是一個簡單的 SVG 圖形實例：
這是 HTML 代碼：
<!DOCTYPE html> <html> <body> <h1>我的第一個 SVG</h1> <svg width="100" height="100"> <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /> </svg> </body> </html>
SVG 代碼解釋：
- SVG 圖像以 <svg> 元素開頭
- <svg> 元素的 width 和 height 屬性定義 SVG 圖像的寬度和高度
- <circle> 元素用于繪制圓形
- cx 和 cy 屬性定義圓心的 x 和 y 坐標。如果未設置 cx 和 cy，則圓心設置為 (0, 0)
- r 屬性定義圓的半徑
- stroke 和 stroke-width 屬性控制形狀輪廓的顯示方式。我們將圓的輪廓設置為 4 像素的綠色“邊框”
- fill 屬性設置圓內的顏色。我們將填充顏色設置為黃色
- </svg> 標簽關閉 SVG 圖像
注意：由于 SVG 是用 XML 寫的，因此所有元素都必須正確關閉！
