HTML 中的 SVG
您可以直接將 SVG 元素嵌入到您的 HTML 頁面中。
直接在 HTML 頁面中嵌入 SVG
這是一個簡單的 SVG 圖形示例
這是 HTML 程式碼
示例
<!DOCTYPE html>
<html>
<body>
<h1>我的第一個 SVG</h1>
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
</body>
</html>
自己動手試一試 »
SVG 程式碼解釋
- 以
<svg>根元素開始 - SVG 影像的寬度和高度透過
width和height屬性定義 - 由於 SVG 是 XML 的一種方言，請始終使用
xmlns屬性正確繫結名稱空間 - 名稱空間 "http://www.w3.org/2000/svg" 標識了 HTML 文件中的 SVG 元素
<circle>元素用於繪製圓形cx和cy屬性定義了圓心的 x 和 y 座標。如果省略，則圓心設定為 (0, 0)r屬性定義了圓的半徑stroke和stroke-width屬性控制形狀的輪廓外觀。我們將圓的輪廓設定為 4px 的綠色 "邊框"fill屬性指的是圓形內部的顏色。我們將填充顏色設定為黃色- 結束標籤
</svg>關閉 SVG 影像
注意：由於 SVG 是用 XML 編寫的，請記住這一點
- 所有元素都必須正確關閉
- XML 是區分大小寫的，所以請在所有 SVG 元素和屬性中使用相同的案例。我們推薦小寫
- 在 SVG 中，請將所有屬性值放在引號內（即使它們是數字）
另一個 SVG 示例
這是另一個簡單的 SVG 圖形示例
這是 HTML 程式碼
示例
<!DOCTYPE html>
<html>
<body>
<svg width="150" height="100" xmlns="http://www.w3.org/2000/svg">
<rect width="100%" height="100%" fill="green" />
<circle cx="75" cy="50" r="40" fill="yellow" />
<text x="75" y="60" font-size="30" text-anchor="middle" fill="red">SVG</text>
</svg>
</body>
</html>
自己動手試一試 »
SVG 程式碼解釋
- 以
<svg>根元素開始，定義寬度和高度，以及正確的名稱空間 <rect>元素用於繪製矩形- 矩形的寬度和高度設定為
<svg>元素的寬度/高度的 100% - 將矩形的填充顏色設定為綠色
<circle>元素用於繪製圓形cx和cy屬性定義了圓心的 x 和 y 座標r屬性定義了圓的半徑- 我們將圓的填充顏色設定為黃色
<text>元素用於繪製文字x和y屬性定義了文字中心的 x 和 y 座標font-size屬性定義了文字的字型大小text-anchor屬性定義了我們希望文字的中間點在哪裡fill屬性定義了文字的顏色- 顯示文字 "SVG"
- 使用
</svg>結束 SVG 影像
