【SVG.js實戰篇】01-Vue中優雅的使用SVG.js

 

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