HTML - svg 标签

HTML <svg> 标签用于包含 SVG 图形。SVG 主要用于矢量图，例如饼图和具有 X、Y 坐标系等的 2D 图形。

XML 文本文件可用于定义 SVG 图像及其行为。因此，SVG图像可以作为XML文件创建和编辑，但一般来说，像inkspace这样的绘图程序是生成它的首选。它描述了 XML 中的混合矢量和二维矢量图形。

语法


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

属性

属性	值	描述
baseProfile	string	本部分概述了作者认为正确呈现内容所需的最低 SVG 语言配置文件。SVG2 之后不支持。
height	length percentage	指示矩形的垂直长度。
preserveAspectRatio	none xMinYMin xMidYMin xMaxYMin xMinYMid xMidYMid xMaxYMid xMinYMax xMidYMax xMaxYMax meet slice	指定将 SVG 片段插入到具有不同纵横比的容器中时所需的变形。
version	number	指定用于创建元素内部内容的 SVG 版本。
viewbox	list-of-numbers	对于当前 SVG 片段，定义 SVG 视口的边界。
width	length percentage	表示矩形的宽度。
x	length percentage	确定 SVG 容器的 X 坐标。最外层的 SVG 元素不受影响。
y	length percentage	确定 SVG 容器的 Y 坐标。最外层的 SVG 元素不受影响。

<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="QikepuCom" 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(#QikepuCom)" />
      <text fill="#17202A" font-size="20" 
            font-family="verdana" x="121" y="111"> 
            QikepuCom
      </text>
   </svg>
</body>
</html>

支持的浏览器

浏览器
<svg>	4.0	9.0	3.0	3.2	10.1

打印本页