介绍

css 属性有一个天然的优势，那就是如果css属性和合适的css选择器配合使用，那么样式效果会有极高的复用性

SVG使用的坐标系统或者说网格系统，和Canvas用的差不多（所有计算机绘图都差不多）。这种坐标系统是：以页面的左上角为(0,0)坐标点，坐标以像素为单位，x轴正方向是向右，y轴正方向是向下。注意，这和你小时候所教的绘图方式是相反的。但是在HTML文档中，元素都是用这种方式定位的。

关于svg的概念

基于XML语法格式的图像格式，可缩放矢量图，其他图像是基于像素的，SVG是属于对图像形状的描述，本质是一个文件，体积小，并且不管放大多少都不会失真；

可以直接插入页面中，成为DOM的一部分 <svg></svg>

可以作为文件被引入 <img srv='pic.svg'/>

可以转为base64引入页面

矩形 rect

x: 矩形左上角的x位置 Y: 矩形左上角的y位置 width: 矩形的宽度 height: 矩形的高度 rx: 圆角的x方位的半径 ry: 圆角的y方位的半径

圆形 circle

r: 圆的半径 cx: 圆心的x位置 cy: 圆心的y位置

椭圆 ellipse

rx: 椭圆的x半径 ry: 椭圆的y半径 cx: 椭圆中心的x位置 cy: 椭圆中心的y位置

线条 line

x1: 起点的x位置 y1: 起点的y位置 x2: 终点的x位置 y2: 终点的y位置

折线 polyline

points: 点集数列。每个数字用空白、逗号、终止命令符或者换行符分隔开。每个点必须包含2个数字，一个是x坐标，一个是y坐标。所以点列表 (0,0), (1,1) 和(2,2)可以写成这样：“0 0, 1 1, 2 2”。

### path 元素是SVG基本形状中最强大的一个

path元素的形状是通过属性d定义的

 往右移50，往下移100：<path d="m50,100..." />

填充和边框(Fill 和 Stroke 属性)

fill属性设置对象内部的颜色，stroke属性设置绘制对象的线条的颜色

属性fill-opacity控制填充色的不透明度，属性stroke-opacity控制描边的不透明度。

stroke-width属性定义了描边的宽度

stroke-linecap控制边框终点的形状

stroke-linejoin用来控制两条描边线段之间，用什么方式连接

除了定义对象的属性外，你也可以通过CSS来样式化填充和描边。语法和在html里使用CSS一样，只不过你要把background-color、border改成fill和stroke。注意，不是所有的属性都能用CSS来设置。上色和填充的部分一般是可以用CSS来设置的，比如fill，stroke，stroke-dasharray等，但是不包括下面会提到的渐变和图案等功能。另外，width、height，以及路径的命令等等，都不能用css设置。判断它们能不能用CSS设置还是比较容易的。