一、介绍
- SVG 意为
可缩放矢量图形 - SVG 是一种用于描述二维图形的 XML 标记语言，与位图图像不同，SVG图像
以文本形式存储，并且可以缩放到任意大小而不会失真，因为它们基于数学描述而不是像素。
二、基本使用
| 项目 | 描述 |
|---|
<svg> | 包裹并定义整个矢量图 |
<line> | 创建一条直线 |
<polyline> | 创建折线 |
<rect> | 创建矩形 |
<circle> | 创建圆 |
<ellipse> | 创建圆和椭圆 |
<polygon> | 创建多边形 |
<path> | 通过指定点以及点和点之间的线来创建任意形状 |
三、使用
<!-- 1.有默认宽高300*150 2.标签3.svg绘制图形务必在svg标签内部使用绘制图形4.--><svg class="box"><!-- x1,y1,（第一个点）x2,y2（第二个点）分别为起点和终点坐标，stroke为线条颜色，stroke-width为线条宽度 --><line x1="100" y1="100" x2="200" y2="200" stroke="red" stroke-width="5"></line><!-- 绘制折线 可以有多个点，多个点的时候，最好带逗号--><polyline points="300 300,50 100, 120 400,20 20" fill-opacity="0" stroke="skyblue"></polyline><!-- 绘制矩形 --><rect x="400" y="400" width="150" height="50" fill="yellow" stroke="black"></rect><!-- 绘制圆形 --><circle cx="370" cy="95" r="50" fill="pink" stroke="black"></circle><!-- 绘制椭圆 cx,cy为圆心坐标，rx ry分别为x轴半径和y轴半径 --><ellipse cx="500" cy="500" rx="100" ry="50" fill="green" stroke="black"></ellipse><!-- 绘制多边形 --><polygon points="600 100,300 400,750 100" fill="purple" stroke="purple"></polygon><!-- 绘制路径 M为移动到初始位置，L为画线，Z为将结束和开始闭合--><path d="M100 100 L200 200 L300 300 Z" fill="none" stroke="blue"></path><!-- 绘制文字 --><text x="100" y="100" fill="red" font-size="30">Hello World</text></svg>
