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原始碼傳送門