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で書かれているため、すべての要素は正しく閉じる必要があります！