HTML 中的 SVG
您可以直接将 SVG 元素嵌入到您的 HTML 页面中。
直接在 HTML 页面中嵌入 SVG
这是一个简单的 SVG 图形示例
这是 HTML 代码
示例
<!DOCTYPE html>
<html>
<body>
<h1>我的第一个 SVG</h1>
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
</body>
</html>
自己动手试一试 »
SVG 代码解释
- 以
<svg>根元素开始 - SVG 图像的宽度和高度通过
width和height属性定义 - 由于 SVG 是 XML 的一种方言，请始终使用
xmlns属性正确绑定命名空间 - 命名空间 "http://www.w3.org/2000/svg" 标识了 HTML 文档中的 SVG 元素
<circle>元素用于绘制圆形cx和cy属性定义了圆心的 x 和 y 坐标。如果省略，则圆心设置为 (0, 0)r属性定义了圆的半径stroke和stroke-width属性控制形状的轮廓外观。我们将圆的轮廓设置为 4px 的绿色 "边框"fill属性指的是圆形内部的颜色。我们将填充颜色设置为黄色- 结束标签
</svg>关闭 SVG 图像
注意：由于 SVG 是用 XML 编写的，请记住这一点
- 所有元素都必须正确关闭
- XML 是区分大小写的，所以请在所有 SVG 元素和属性中使用相同的案例。我们推荐小写
- 在 SVG 中，请将所有属性值放在引号内（即使它们是数字）
另一个 SVG 示例
这是另一个简单的 SVG 图形示例
这是 HTML 代码
示例
<!DOCTYPE html>
<html>
<body>
<svg width="150" height="100" xmlns="http://www.w3.org/2000/svg">
<rect width="100%" height="100%" fill="green" />
<circle cx="75" cy="50" r="40" fill="yellow" />
<text x="75" y="60" font-size="30" text-anchor="middle" fill="red">SVG</text>
</svg>
</body>
</html>
自己动手试一试 »
SVG 代码解释
- 以
<svg>根元素开始，定义宽度和高度，以及正确的命名空间 <rect>元素用于绘制矩形- 矩形的宽度和高度设置为
<svg>元素的宽度/高度的 100% - 将矩形的填充颜色设置为绿色
<circle>元素用于绘制圆形cx和cy属性定义了圆心的 x 和 y 坐标r属性定义了圆的半径- 我们将圆的填充颜色设置为黄色
<text>元素用于绘制文本x和y属性定义了文本中心的 x 和 y 坐标font-size属性定义了文本的字体大小text-anchor属性定义了我们希望文本的中间点在哪里fill属性定义了文本的颜色- 显示文本 "SVG"
- 使用
</svg>结束 SVG 图像
