SVG <svg>用法及代碼示例

SVG 代表可縮放矢量圖形。它可以用來製作圖形和動畫，就像在 HTML 畫布中一樣。

HTML 中的 <svg> 元素支持 SVG 圖形。 SVG 圖形具有一個容器，我們可以在其中創建各種形狀，例如方框、路徑、文本、圖形圖像和圓形。

用法:

<svg width="x" height="y"> shape_tags... </svg>

屬性：

viewBox屬性指示圖像元素所在坐標的中心。
筆劃屬性表示用於繪製形狀輪廓的顏色。
填充屬性表示用於繪製元素的顏色。
stroke-width表示用於形狀的顏色的寬度。
RGB(x，y，z)：這是紅、綠、藍 (RGB) 值的三元組，用於定義使用每種原色的多少來生成所需的顏色。
寬度和高度矩形中的表示矩形的高度和寬度。
baseProfile 屬性表示作者認為正確呈現內容所必需的最小 SVG 語言配置文件。
contentScriptType屬性指定 <svg> 元素上給定文檔片段的默認腳本語言。
contentStyleType 屬性表示給定文檔片段的樣式表語言。
preserveAspectRatio 屬性表示具有給定寬高比的 viewBox 的元素必須如何適應具有不同寬高比的視口。
version 屬性用於指示文檔類型SVG的規範。
viewBox 屬性表示 SVG 視口的尺寸。

示例 1：製作一個輪廓為綠色並填充黑色的圓圈。

HTML


<!DOCTYPE html> 
<html lang="en"> 
<body> 
    <svg viewBox="0 0 300 100" stroke="green" 
        fill="dark green"> 
        <circle cx="50" cy="50" r="40" /> 
    </svg> 
</body> 
</html>

cx表示圓的寬度，cy表示圓的高度，r表示圓的半徑。

        <circle cx="50" cy="50" r="40"/>

輸出：

示例 2：製作一個輪廓為深綠色並填充淺綠色的矩形。

HTML


<!DOCTYPE html> 
<html lang="en"> 
<h1>GeeksForGeeks</h1> 
<body> 
    <svg width="400" height="100"> 
        <rect width="400" height="100" 
            style="fill:rgb(20, 204, 20); 
                stroke-width:10;stroke:rgb(14, 180, 89)"/> 
    </svg> 
</body> 
</html>

輸出：

支持的瀏覽器列表：

相關用法

注：本文由純淨天空篩選整理自ayushcoding100大神的英文原創作品 SVG <svg> Element。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。