SVG ใน HTML
- หน้าก่อน นิยาม SVG
- หน้าต่อไป 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 ดังนั้น ทุกองค์ประกอบต้องปิดให้ถูกต้อง!
- หน้าก่อน นิยาม SVG
- หน้าต่อไป SVG สี่เหลี่ยม
