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

打印页面