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)