HTML 中的 SVG

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

将 SVG 直接嵌入 HTML 页面

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

抱歉，您的浏览器不支持内联 SVG。

这是 HTML 代码：

<!DOCTYPE html>
<html>
<body>

<h1>我的第一个 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 属性定义圆的半径
  • stroke 和 stroke-width 属性控制形状轮廓的显示方式。我们将圆的轮廓设置为 4 像素的绿色“边框”
  • fill 属性设置圆内的颜色。我们将填充颜色设置为黄色
  • </svg> 标签关闭 SVG 图像

注意：由于 SVG 是用 XML 写的，因此所有元素都必须正确关闭！