SVG简述
简介
SVG是一种基于 XML 的图像文件格式，他的英文全称为 Scalable Vetor Graphics，意思为可缩放的矢量图形
基本的 SVG 元素
以下列表涵盖了常用的构建块：
<svg>包裹并定义整个矢量图。<svg>标签之于矢量图就如同<html>标签于一个web页面<line>创建一条直线<polyLine>创建折线<rect>创建矩形<circle>创建圆形<ellipse>创建圆形、椭圆形<polygon>创建多边形<path>通过指定点以及点之间的线来创建任意形状
详细使用
所有标签都要包裹在
<svg>中使用
<line>
<svg class="main">
<line x1="100" y1="100" x2="200" y2="200" stroke="red" stroke-width="2"></line>
<line x1="100" y1="200" x2="200" y2="100" stroke="red"></line>
</svg>- x1 y1 是第一个点的坐标
- x2 y2 是第二个点的坐标
- stroke 绘制的线的颜色
- stroke-width 线的粗细
<polyline>
<svg class="main">
<polyline points="200 300,220 120,500 230" fill-opacity="0" stroke="cyan"></polyline>
</svg>绘制折线，默认填充了黑色，可以用fill-opacity更改透明度，可以多个点，格式为x1 y1,x2 y2,x3 y3
<rect>
<rect x="10" y="20" width="222" height="111" fill="pink"></rect>绘制矩形，默认填充黑色fill可以修改填充的颜色
<circle>
<circle cx="200" cy="300" r="100" style="stroke:black;fill:none"></circle>绘制圆形， cx cy为圆心点坐标 r表示半径 sytle样式
<ellipse>
<ellipse cx="200" cy="300" rx="100" ry="120" style="fill:black"></ellipse>绘制椭圆，rx ry 表示x轴的半径和y轴的半径
<polygon>
<polygon points="100 100,120 120,40 40,150 60,60 420"></polygon>绘制多边形，points里面的参数和polyline一样`
<path>
<path d=" M 10 10 L 20 20 L 30 20 L 10 40 Z " style=“fill:pink”></path>M移动到初始位置 L 画线 Z将结束和开始点闭合