【SVG.js实战篇】01-Vue中优雅的使用SVG.js

一、关于SVG.js

SVG.js是一个基于SVG的开源JS库，支持操作 SVG 和执行 SVG 动画。

• github仓库
• 官方文档
• 源码传送门: 点我🤠

二、安装

// npm
npm install @svgdotjs/svg.js
// yarn
yarn add @svgdotjs/svg.js

三、项目中引入

import { SVG } from "@svgdotjs/svg.js"

四、绘制基础图形

绘制图形之前，首先需要创建一个SVG.js可以用来识别的容器:

<template>
  <div>
    <div id="simpleSquare"></div>
  </div>
</template>

接下来，可以愉快的开始绘制图形了:

第一步: 使用SVG()