SVG 在 HTML 中

您可以将 SVG 元素直接嵌入到 HTML 页面中。

将 SVG 直接嵌入 HTML 页面

下面是一个简单的 SVG 图形示例：

这是 HTML 代码：

示例

<!DOCTYPE html>
<html>
<body>

<h1>My first SVG</h1>

<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

</body>
</html>

亲自试一试 »

SVG代码解释：

SVG 图片以 <svg> 元素开头
<svg> 元素的 width 和 height 属性定义 SVG 图片的宽度和高度
<circle>元素用于绘制圆形
cx 和 cy 属性定义圆心的 x 和 y 坐标。如果未设置 cx 和 cy，则圆心设置为 (0, 0)
r 属性定义圆的半径
描边和描边宽度属性控制形状轮廓的显示方式。我们将圆圈的轮廓设置为 4px 绿色"border"
fill 属性指的是圆内的颜色。我们将填充颜色设置为黄色
结束 </svg> 标签关闭 SVG 图片

笔记：由于 SVG 是用 XML 编写的，因此所有元素都必须正确闭合！