<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SVG in HTML Example</title>
</head>
<body>
<h2>SVG Example</h2>
<!-- SVG 图形 -->
<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
<!-- 矩形 -->
<rect width="150" height="80" fill="lightblue" />
<!-- 文本 -->
<text x="20" y="50" font-family="Arial" font-size="16" fill="black">Hello, SVG!</text>
</svg>
</body>
</html>
在这个例子中：
- 使用<svg>元素定义了SVG图形的画布，设置了宽度（width）和高度（height）。
- 在<svg>元素内，使用<rect>元素定义了一个矩形，使用<text>元素定义了文本。
- 通过设置各种属性，如width、height、x、y、fill等，可以调整图形的样式和位置。
- 该HTML文档包含了一个简单的标题（<h2>）和SVG图形。
当你在浏览器中打开这个HTML文件时，应该能够看到一个带有矩形和文本的SVG图形。SVG图形将被嵌入到HTML文档中，允许你直接在HTML中创建矢量图形而不需要外部图像文件。
转载请注明出处：http://www.zyzy.cn/article/detail/14667/SVG