矢量图与位图
位图（BMP、PNG、JPG等）
描述每个点的颜色。放大会看到它是由一个一个的像素块组成。
矢量图（SVG、AI等）
基于数学的描述（贝塞尔曲线）。
使用SVG
- 浏览器直接打开
- 在HTML中使用<img>标签引入
- 直接在HTML中使用SVG标签
- 作为CSS背景
基本图形
<rect>矩形
<circle>圆形
<ellipse> 椭圆
<line>线
<polyline>折线
<polygon>
path绘制高级图形
矩形
<rect>
属性：
- x、y:与边框的距离
- width、height：元素宽度高度
-
rx、ry：圆角半径，如果值给定了rx没给ry，ry会沿用rx的值。
<rect>
圆
<circle>
属性：
- cx、cy：圆心的位置
-
r: 半径
<circle>
椭圆
<ellipse>
属性：
- cx、cy:圆心
-
rx、ry:横纵半径
<ellipse>
线
<lin>
属性：
- x1、y1:直线起点
-
x2、y2：直线终点
<line>
折线
<polyline>
属性：
*points:
<polyline points="x1 y1 x2 y2…… " >
<polyline>
多边形
<polygon>
与折线类似
属性：
属性：
*points:
<polygon points="x1 y1 x2 y2…… " >
<polygon>
基本属性
-
fill填充颜色 -
stroke边框颜色 -
stroke-width边框宽度 -
transform样式变换，如旋转
基本API
创建图形
document.createElementNS(ns，tagName)添加图形
element.appendChild(childElement)设置/获取属性
element.setAttribute(name,value)
element.getAttribute(name)
坐标系统
世界与视野
SVG中的世界是无穷大的，视野（viewbox）是世界的一部分可视区域。
-
width、height控制视窗 -
SVG代码定义世界 -
viewBox、preserveAspectRatio- 控制视野
preserveAspectRatio有两个参数，第二个是meet/slice。slice会将视野和视窗放到同样大小。
meet
slice
第一个参数有：
none拉伸视野视窗xMinYMin/xMinYMax/xMaxYMin……宽高对齐方式
<svg
width="800" height="600"
viewBox="0 0 400 300"
preserveAspectRatio="xMidYMid meet"
>
</svg>
视窗：浏览器渲染SVG所用范围
视野： 相对于视窗用户的可见范围
viewBox=视窗大小
viewBox<视窗大小
分组概念
将多个SVG图形变成一个整体，方便整体地修改。
<g>标签创建分组。
一个锤子
<g fill="red" stroke="red" >
<rect x="250" y="300" width="100px" height="50px"/>
<rect x="275" y="350" width="50px" height="100px"/>
</g>
锤子
坐标系统
用户坐标系也就相当于视野的坐标系。
自身坐标系比如绘制了一个矩形，矩形自身内部的坐标系。
前驱坐标系现对于父元素坐标系。
如下图，举行的自身坐标系没改变，但是添加了translate后，自身坐标系相对于前驱坐标系改变了：
前驱坐标系
坐标系理解
参考坐标系
参考坐标系
