SVG 入门基础（一）

一、简介

• svg 文档
  
• 浏览器支持情况：IE 9+、Chrome 33.0+、Firefox 28.0+、Safari 7.0+。
  
• SVG 属于 矢量图，位图 放大之后就是一个一个像素点组成的，位图 放大之后会出现模糊，矢量图 不会。
  
  
• 使用方式
  1、浏览器直接打开。
  2、在 HTML 中使用 <img> 标签引用。
  3、直接在 HTML 中使用 SVG 标签。
  4、作为 CSS 背景。
  

二、基本图形与属性

• 基本图形，也就是比较常用的图形

• <rect>：矩形，rx 与 ry 如果没有同时设置，会默认使用对方的值。

• <circle>：圆形

• <ellipse>：椭圆

• <line>：线

• <polyline>：折线，points 内坐标点值可以用 空格 或者 , 来分割开就行。

• <polygon>：多边形，points 内坐标点值可以用 空格 或者 , 来分割开就行，跟 折线 唯一不同的就是，它会帮你把最后一个点跟第一个点连起来，形成一个闭合图形。

• <path>：路径

• 基本属性

• fill：填充颜色
  
• stroke：描边颜色
  
• stroke-width：描边粗细
  
• transform：旋转属性
  

三、基本操作 API

• 创建图形

document.createElementNS(ns, tagName)

• 添加图形

document.appendChild(childElement)

• 设置/获取属性

element.setAttribute(name, value)
element.body.getAttribute(name)