SVG.js 笔记（一）

时间 2019-11-08

标签 svg.js svg 笔记栏目 JavaScript 繁體版

原文原文链接

SVG.js 是一款轻量级的SVG类库，而且不依赖任何第三方类库。html

而后是一堆废话，讲框架是如何接近SVG规范，而且保持轻量级。接着就是展现一些SVG.js特色，为了让你相信并使用他。npm

代码精简

经过和竞品比较，证实SVG.js是如何轻量级的。SVG.js用接近一半的代码量实现一样的功能。浏览器

快

比竞品渲染速度快，但不像vanilla.js那样快框架

可读性高，整洁的语法

用原生JS建立和操做SVG比较繁琐，只建立一个矩形就须要不少代码。但使用SVG.js建立相同的矩形，代码可读性好。svg

动画

安装方法：

bower， npm，cdn，源代码下载均可以。压缩过的svg.js代码有65KB左右，已经算比较小了。用gzip压缩后大小16KB左右函数

起步：

简单，建立一个HTML文件，声明一个具备id属性的的元素，做为svg.js的挂载点。动画

<!DOCTYPE html>
<html>
<head>
  <title>SVG.js</title>
</head>
<body>
  <div id="drawing" class="drawing-panel"></div>
</body>
</html>

二、建立SVG DOM对象，使用SVG构造函数，函数的第一个参数能够是元素的id，或者DOM元素对象spa

var draw = SVG('drawing').size(300, 300) // SVG('drawing') or SVG(document.getElementsByClassName('drawing-panel')[0])
var rect = draw.rect(100, 100).attr({ fill: '#f06' })

页面产生的效果插件

<div id="drawing">
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="300">
    <rect width="100" height="100" fill="#f06"></rect>
  </svg>
</div>

默认状况下，SVG.js 生成的svg大小跟随父级元素的大小，就是id="drawing"的div的高度和宽度code

var draw = SVG('drawing').size('100%', '100%')

检查浏览器是否支持SVG：通常浏览器是都支持svg的，可是SVG.js 用了某些低版本浏览器不支持的属性方法，全部必要的时候仍是要监测浏览器是否支持

if (SVG.supported) {
  var draw = SVG('drawing')
  var rect = draw.rect(100, 100)
} else {
  alert('SVG not supported')
}

等待DOM加载完毕：通常不须要，你们都习惯把脚本文件放在body后面，但若是把脚本放到head里，就须要这一步了。

SVG.on(document, 'DOMContentLoaded', function() {
  var draw = SVG('drawing')
})

SVG.js 只提供了基础的绘图方法，至于工程上的拖拽，可视化绘制等等都须要本身手动添加。好在SVG.js有良好的社区，还有其余一些扩展插件，大多数的功能均可以经过插件或自行开发完成。

SVG.js 笔记 （一）

代码精简

快

可读性高，整洁的语法

动画

安装方法：

起步：

SVG.js 笔记（一）