HTML svg 标签 - 绿叶网

HTML svg 语法

在 HTML 中，svg 标签用于在网页中绘制矢量图形，如圆形、矩形、线条、路径等。SVG 是一种基于 XML 的矢量图形格式，它具有以下优点。

可缩放性：SVG 图像可以无限放大而不会失真。
清晰度：无论在手机、平板还是电脑上，SVG 图形都能保持锐利清晰。
灵活性：既可以直接在代码中修改图形的颜色、大小、形状，也可以通过 CSS 和 JavaScript 动态控制。
跨平台兼容：支持所有现代浏览器和主流操作系统，无需额外插件。

语法：

<svg width="宽度" height="高度"></svg>

说明：

width 属性用于指定 svg 的宽度，height 属性用于指定 svg 的高度。

提示: SVG 涉及的内容非常多，它本身完全可以看成是一门独立的技术。更多关于 SVG 的使用，请关注绿叶网未来上线的 SVG 教程。

HTML svg 摘要

属于	HTML 标签
使用频率	中
兼容性	查看
官方文档	查看
MDN	查看

HTML svg 示例

接下来，我们通过几个简单的例子来讲解一下 HTML svg 标签是如何使用的。

示例 1：使用 svg 绘制直线

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <svg width="200" height="150" style="border:1px dashed gray;">
        <line x1="50" y1="50" x2="150" y2="100" stroke="red" stroke-width="2" />
    </svg>
</body>
</html>

页面效果如下图所示。

HTML svg标签绘制直线

分析：

上面例子使用 svg 绘制了一条从 (50, 50) 到 (150, 100)、颜色为 "red"、宽度为 2px 的直线。

示例 2：使用 svg 绘制矩形

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <svg width="200" height="150" style="border:1px dashed gray;">
        <rect x="50" y="50" width="80" height="80" fill="hotpink" />
    </svg>
</body>
</html>

页面效果如下图所示。

HTML svg标签绘制矩形

分析：

上面例子使用 svg 绘制了一条左上角坐标为 (50, 50)、宽度为 80px、高度为 80px、填充颜色为 "hotpink" 矩形。

示例 3：使用 svg 绘制圆

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <svg width="200" height="150" style="border:1px dashed gray;">
        <circle cx="80" cy="80" r="50" fill="lightskyblue" />
    </svg>
</body>
</html>

页面效果如下图所示。

HTML svg标签绘制圆形

分析：

上面例子使用 svg 绘制了一条圆心坐标为 (80, 80)、半径为 50px、填充颜色为 "skyblue" 的圆。