矢量图与位图

位图（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后，自身坐标系相对于前驱坐标系改变了：

前驱坐标系 坐标系理解

参考坐标系

参考坐标系