SVG
专栏收录该内容
订阅专栏
一、关于SVG.js
SVG.js是一个基于SVG的开源JS库,支持操作 SVG 和执行 SVG 动画。真的很好用!(在实际项目场景中,使用SVG.js很便利友好)
github仓库
官方文档
本文Demo源码
二、安装
// npm
npm install @svgdotjs/svg.js
// yarn
yarn add @svgdotjs/svg.js
1
三、项目中引入
import { SVG } from "@svgdotjs/svg.js"
1
四、绘制基础图形
绘制图形之前,首先需要创建一个SVG.js可以用来识别的容器:
<template>
<div>
<div id="simpleSquare"></div>
</div>
</template>
1
2
接下来,可以愉快的开始绘制图形了:
第一步: 使用SVG()API初始化一个SVG节点实例:
let shapeModel = SVG().addTo("#simpleSquare").size("100%", "100%");`
1
2
第二步,利用SVG提供的图形绘制方法绘制基础图形:
绘制正方形
shapeModel.rect(100, 100).attr({ fill: "#00B1B6" });
绘制圆
shapeModel.circle(100).radius(50).attr({ fill: "#0284A3" });
绘制多边形
shapeModel.polygon("0,0,100,50,50,100").fill("#175369") .stroke({ width: 1 });
绘制线条
shapeModel.line(0, 0, 100, 150).stroke({ width: 5, color: "#6488B7" });
绘制自定义图形
shapeModel.image('图片存储路径');
绘制矢量Path路径(SVG的path路径绘制而成的图)
shapeModel.path("M0 0 H50 A20 20 0 1 0 100 50 v25 C50 125 0 85 0 85 z").fill("#495975");
本文Demo源码传送门