上一节:
下一节:

  SVG 嵌入 HTML

  • 定义和使用

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

  • 如何使用 SVG 嵌入网页？

    这是一个简单的 SVG 图形的示例：
     
    下面这是 HTML 代码： 
    <html lang="en">
<head>
    <meta charset="UTF-8">
    <title>欢迎来到蝴蝶教程</title>
</head>
<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 属性定义圆的半径
    • 笔触和笔触宽度属性控制形状轮廓的显示方式。 我们将圆圈的轮廓设置为 4px 绿色的“边框”
    • fill 属性是指圆圈内的颜色。 我们将填充颜色设置为黄色
    • </svg> 标签会关闭 SVG 图片
    注意：由于 SVG 是用 XML 编写的，因此必须正确关闭所有元素！

  • 相关页面

上一节:
下一节: