入门案例：绘制点、矩形、直线和圆形
<iframe height="300" src="https://www.youbaobao.xyz/datav-res/examples/test-svg.html" style='color: rgba(44, 62, 80, 1); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0; text-transform: none; white-space: normal; widows: 2; word-spacing: 0; -webkit-text-stroke-width: 0px; background-color: rgba(255, 255, 255, 1); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial' width="100%"></iframe><!DOCTYPE html>
<html>
<head>
</head>
<body>
<svg width="800" height="800">
<rect
width="50"
height="50"
style="fill:red;stroke-width:0;stroke:rgb(0,0,0);"
/>
<line
x1="100"
y1="100"
x2="250"
y2="75"
style="stroke:blue;stroke-width:1"
/>
<line
x1="250"
y1="75"
x2="300"
y2="100"
style="stroke:blue;stroke-width:1"
/>
<circle
cx="200"
cy="200"
r="50"
stroke="green"
stroke-width="2"
fill="red"
/>
<line
x1="300"
y1="300"
x2="301"
y2="301"
style="stroke:red;stroke-width:1"
/>
</svg>
</body>
</html>
<!DOCTYPE html>
<html>
<head></head>
<body>
<svg width="800" height="800">
<!-- 矩形 -->
<rect width="50" height="50" style="fill:red;" />
<!-- 线段，起点、终点/中间点坐标 -->
<line x1="100" y1="100" x2="250" y2="75" style="stroke:blue;stroke-width: 1;" />
<line x1="250" y1="75" x2="300" y2="100" style="stroke:blue;stroke-width: 1;" />
<!-- 圆形，和上面写style是一样的 -->
<circle cx="200" cy="200" r="50" stroke="green" stroke-width="2" fill="red" />
<!-- 点 -->
<line x1="300" y1="300" x2="301" y2="301" style="stroke:red;stroke-width: 1;" />
</svg>
</body>
</html>
思考：你能否总结出 svg 绘图的流程？
- 编写 svg 标签，指定宽高
- 编写 svg 绘图标签
- 编写绘图属性和样式
TIP