学习笔记——初识SVG.js

初次学习并使用SVG.js插件。

一、介绍 

SVG.js 用于操纵和设置 SVG 动画的轻量级库。 SVG.js 没有依赖性，它的目标是尽可能小，同时提供接近完整的 SVG 规范覆盖范围。

二、安装 

一）npm

npm install @svgdotjs/svg.js

 二）yarn

yarn add @svgdotjs/svg.js

 三）CDN

<script src="https://cdn.bootcdn.net/ajax/libs/svg.js/3.1.2/svg.min.js"></script>

三、使用 

一）CDN

<svg id="svg"></svg>
<script src="https://cdn.bootcdn.net/ajax/libs/svg.js/3.1.2/svg.min.js"></script>
<script>
	var draw = SVG().addTo('#svg').size(300, 300);
	var rect = draw.rect(100, 100).attr({ fill: '#f06' });

	SVG.on(document, 'DOMContentLoaded', function () {
		// 等待Dom加载
		console.log('dom已加载')
	})
</script>

 二）纯SVG

<!-- 纯SVG -->
<?xml version="1.0" encoding="utf-8" ?>
<svg id="drawing" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
	<script type="text/javascript" xlink:href=https://cdn.bootcdn.net/ajax/libs/svg.js/3.1.2/svg.min.js"></script>
	<script type="text/javascript">
			< ![CDATA[
				let draw1 = SVG('#drawing')
				draw1.rect(100, 100).animate().fill('#f03').move(100, 50)
			]]>
	</script>
</svg>

 三）vue中使用

首先通过npm或yarn命令安装好包后，直接通过import导入即可

import { SVG } from '@svgdotjs/svg.js'
import '@svgdotjs/svg.draggable.js'

三、视频讲解

视频讲解https://www.bilibili.com/video/BV1dc411N7xJ/?vd_source=be4efb0f2cfe5e83a1774731474196fd​​​​​​​