svg基本使用

发表于 2018-04-22 分类于笔记

基本概念

SVG（Scalable Vector Graphics），即可缩放矢量图形，用于描述二维矢量图形；SVG是基于XML制定的，因此遵循XML语法。

SVG的坐标系统跟canvas以及window的一样，都是以左上角为原点，X轴向右变大，Y轴向下变大；

视口就是指SVG画布所呈现的大小，即实际尺寸；可以通过属性width和height来设置，也可以通过style来设置。默认长度单位为px，其它单位有em,ex,pt,cm,mm,in等。

viewBox可以理解为设置SVG画布的坐标刻度；viewBox属性有四个参数，分别是x轴刻度最小值，y轴刻度最小值，x轴总长度，y轴总长度。坐标刻度铺满整个画布，并等比例缩放，因此并不总是1：1的比例！

1 2	<svg width="500" height="500" viewBox="-100 -100 500 500"> </svg>

example

上例中的SVG画布的视口大小为500x500，而坐标的左上角为（-100，-100），坐标系的总大小为500x500；所以可以理解为画布的右下角坐标为（400，400），左上角坐标为（-100，-100）。

SVG基本形状有line（线段），polyline（折线段），rect（矩形），polygon（多边形），circle（圆形），ellipse（椭圆）；基本属性如下：

svg basic graphics

在SVG中可以对某一图形添加transform属性来实现坐标变换，就类似于CSS3中的transform；基本使用方法如下：

svg transform

SVG中使用的坐标变换原理：先对当前坐标系进行一系列变换（按变换序列的顺序进行），然后把图形按变换前的坐标位置放到变换后的坐标系中！

矩阵变换参数：

$matrix$

所有的基本形状指令都是基于path标签来实现的，因此path可谓是SVG的画图指令之精髓。

path通过在d属性中使用一系列指令来描绘各种线段或曲线；其中大写的指令使用的是绝对坐标，而小写的坐标使用的是相对坐标（即相对当前点的位移）；具体指令用法如下：

svg path

注：路径命令必须要以M开头，若以m开头也是自动使用绝对坐标！闭合路径使用Z，大小写效果是一样的。

椭圆弧绘制由7个参数确定：

原理：

svg path ellipse