SVG基础

一、介绍

SVG是一种基于XML的图像文件格式，是一种缩放不会失真的矢量图。

使用<svg></svg>标签来绘制形状，形状的绘制都要放在此标签中，svg默认宽度是300px，高度150px，设置宽高的时候要在css中去设置（与canvas不同）。

二、基本用法

1.绘制线段：line标签

<!-- 绘制线段 -->
<line x1="100" y1="100" x2="200" y2="200" stroke="red"></line>

x1、y1：第一个点，x2、y2：第二个点。

设置stroke属性才会有线段显示，且此属性可以设置线段颜色。

2.绘制折线：polyline标签

<!-- 绘制折线 -->
<polyline points="150 150,20 250,30 80" fill-opacity="0.1" stroke="blue"></polyline>

points表示点，点之间用逗号隔开（也可以不用），fill-opacity是设置透明度，默认是黑色填充。

如果不人为设置折线的第一个点与最后一个点相连ÿ