SVG 在 HTML 中
您可以将 SVG 元素直接嵌入到 HTML 页面中。
将 SVG 直接嵌入到 HTML 页面中
这是一个简单的 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属性定义圆心坐标。如果省略，圆心将设置为 (0, 0)r属性定义圆形的半径stroke和stroke-width属性控制形状轮廓的外观。我们将圆形的轮廓设置为 4 像素的绿色“边框”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属性定义圆心坐标r属性定义圆形的半径- 我们将圆形的填充颜色设置为黄色
- 使用
<text>元素绘制文本 x和y属性定义文本中心的 x 和 y 坐标font-size属性定义文本的字号text-anchor属性定义我们想要文本的中点在哪里fill属性定义文本的颜色- 将“SVG”作为文本显示
- 使用
</svg>关闭 SVG 图像
