<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 SVG 示例</title>
</head>
<body>
<svg width="200" height="200">
<!-- 绘制圆形 -->
<circle cx="100" cy="100" r="50" fill="red" />
<!-- 绘制矩形 -->
<rect x="50" y="50" width="100" height="50" fill="blue" />
<!-- 绘制文本 -->
<text x="20" y="180" fill="black">Hello, SVG!</text>
</svg>
</body>
</html>
在这个示例中，我们使用 <svg> 元素创建了一个 SVG 容器，并在容器内使用 <circle> 绘制了一个红色的圆形、<rect> 绘制了一个蓝色的矩形、<text> 绘制了文本。
SVG 的一些基本元素和属性：
1. <svg> 元素：
- SVG 容器，用于包裹 SVG 图形元素。
2. 形状元素：
- <circle>：绘制圆形。
- <rect>：绘制矩形。
- <ellipse>：绘制椭圆。
- <line>：绘制直线。
- <polygon>：绘制多边形。
- <polyline>：绘制折线。
3. 文本元素：
- <text>：用于显示文本。
4. 样式和颜色：
- fill：填充颜色。
- stroke：描边颜色。
- stroke-width：描边宽度。
5. 路径元素 <path>：
- 允许通过路径命令绘制复杂的图形。
<svg width="200" height="200">
<path d="M10 80 Q 95 10 180 80" fill="none" stroke="black" stroke-width="2" />
</svg>
SVG 具有许多高级功能，包括滤镜、渐变、动画等。可以通过 JavaScript 与 SVG 结合，实现复杂的交互和动态效果。SVG 是一个强大的工具，适用于图表、图标、地图等图形应用的创建。如果你对 SVG 感兴趣，可以深入学习其更高级的用法和技术。
转载请注明出处：http://www.zyzy.cn/article/detail/12426/HTML