HTML - <svg> 標籤

HTML <svg> 標籤用於包含 SVG 圖形。SVG 主要用於向量圖，例如餅圖和具有 X、Y 座標系的二維圖形等。

XML 文字檔案可用於定義 SVG 影像及其行為。因此，SVG 影像可以建立和編輯為 XML 檔案，但一般來說，建議使用 Inkscape 等繪圖程式生成它。它用 XML 描述混合向量和二維向量圖形。

語法

<svg>
......
</svg>

屬性

HTML svg 標籤支援 HTML 的全域性和事件屬性。以及一些特定的屬性，列在下面。

屬性	值	描述
baseProfile	字串	本節概述了作者認為正確呈現內容所需的最小 SVG 語言配置檔案。SVG2 之後不再支援。
height	長度百分比	指示矩形的垂直長度。
preserveAspectRatio	無 xMinYMin xMidYMin xMaxYMin xMinYMid xMidYMid xMaxYMid xMinYMax xMidYMax xMaxYMax 滿足切片	指定將 SVG 片段插入具有不同縱橫比的容器時所需的變形。
version	數字	指定用於建立元素內部內容的 SVG 版本。
viewbox	數字列表	對於當前 SVG 片段，定義 SVG 視口的邊界。
width	長度百分比	指示矩形的寬度。
x	長度百分比	確定 svg 容器的 x 座標。最外層的 SVG 元素不受影響。
y	長度百分比	確定 svg 容器的 y 座標。最外層的 SVG 元素不受影響。

HTML svg 標籤示例

下面的示例將說明 svg 標籤的使用。在哪裡、何時以及如何使用 svg 標籤，以及我們如何使用 CSS 操作 svg 元素。

建立矩形 SVG 元素

讓我們看下面的例子，我們將使用 <svg> 標籤繪製一個矩形。

<!DOCTYPE html>
<html>
<body>
   <svg width="250" height="150">
      <rect width="200" height="100" style="fill:#DE3163;
         stroke-width:8;stroke:#D5F5E3" />
   </svg>
</body>
</html>

建立正方形 SVG 元素

考慮另一種情況，我們將繪製一個具有圓角的正方形。

<!DOCTYPE html>
<html>
<body>
   <svg width="400" height="400">
      <rect x="25" y="25" rx="20" ry="20" width="200" height="200" 
            style="fill:#58D68D;stroke:#7D3C98;
                   stroke-width:3;opacity:0.5" />
   </svg>
</body>
</html>

使用 svg 標籤建立徽標

以下是一個示例，我們將繪製 SVG 徽標。

<!DOCTYPE html>
<html>
<body>
   <svg height="200" width="600">
      <defs>
         <linearGradient id="tutorial" x1="1%" y1="1%" x2="50%" y2="1%">
            <stop offset="0%" style="stop-color:white;
               stop-opacity: 1" />
            <stop offset="100%" style="stop-color: #52BE80;
               stop-opacity: 1" />
         </linearGradient>
      </defs>
      <ellipse cx="210" cy="100" rx="120" ry="81" fill="url(#tutorial)" />
      <text fill="#17202A" font-size="20" 
            font-family="verdana" x="121" y="111"> 
            TUTORIALSPOINT 
      </text>
   </svg>
</body>
</html>

支援的瀏覽器

標籤
svg	是 4.0	是 9.0	是 3.0	是 3.2	是 10.1

html_tags_reference.htm

列印頁面