基本的SVG元素:
<svg>
包裹并定义整个矢量图。
<line>
创建一条直线
<polyline>
创建折线
<rect>
创建矩形
<circle>
创建圆
<ellipse>
创建圆和椭圆
<polygon>
创建多边形
<path>
通过指定点以及点和点之间的线来创建任意形状
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
margin: 0;
padding: 0;
width: 800px;
height: 800px;
}
</style>
</head>
<body>
<!-- svg双闭合标签:默认宽度与高度 300 * 150 svg在绘制图形时务必在标签内绘制图形 -->
<svg class="box">
<!-- x1 y1 第一个点的坐标,x2 y2 第二个点的坐标 stroke绘制线段并且指定颜色 -->
<line x1="100" y1="100" x2="200" y2="200" stroke="red"></line>
<line x1="100" y1="200" x2="200" y2="100" stroke="red"></line>
<!-- 绘制折线:可以多个点,多个点的时候最好带有逗号 -->
<polyline points="300 300, 50, 100, 120 400, 100 20" fill-opacity="0" stroke="cyan"></polyline>
<!-- 绘制矩形 -->
<!-- fill 属性:设置填充颜色的 fill-opacity 设置填充颜色的透明度 -->
<rect x="400" y="400" width="150" height="50" fill="pink"></rect>
<!-- 绘制圆形 -->
<!-- cx x坐标 cy y坐标,r 半径 -->
<circle cx="370" cy="95" r="50" style="fill: none; stroke: cyan"></circle>
<!-- 绘制圆形|椭圆 -->
<!-- cx x坐标 cy y坐标,rx x轴半径 ry y轴半径 -->
<ellipse cx="500" cy="500" rx="100" ry="50" style="fill: none; stroke: blue"></ellipse>
<!-- 多边行 -->
<polygon points="600 100, 300 400, 750 100" stroke="red" fill-opacity="0"></polygon>
<!-- 绘制任意图形 -->
<!-- d 路径 M 开始点 L连接点 Z结束点 -->
<path stroke="orange" fill-opacity="0"
d="
M 10 10
L 20 400
L 30 120
L 40 59
L 23 540
L 56 111
L 349 234
z 10 10
"
></path>
</svg>
</body>
</html>
<script>
</script>
效果图