SVGJS使用

svgjs用于操作 SVG 和动画的轻量级库。

官网 SVG.js v3.2 |家 (svgjs.dev)

1、安装

npm install @svgdotjs/svg.js

或者下载直接引用

2、使用

<script src="https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js@3.0/dist/svg.min.js"></script>

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

3、例子

vue中使用

<template>
  <h3 >测试</h3>
  
  <button @click="addRectFunc()"> add rect </button>
  <div id="addsvgdiv">
  </div>
  <div>
    <button @click="addRect()"> add  </button>
    <button @click="changeRect()"> change  </button>
    <div id="svgdiv"></div>
  </div>

  <h3 >测试嵌套group</h3>
  <div>
    <button @click="ctaddRect()"> ctaddRect  </button>
    <div id="svgcontaindiv"></div>
  </div>
  
  

</template>
<script setup>

import { onMounted, reactive, ref } from "vue";
import { SVG, Rect } from '@svgdotjs/svg.js'


function testclicked() {
  console.log("test clicked");
};

onMounted(() => {
  console.log("mounted");
})

function addRectFunc()
{
  let draw = SVG().addTo('#addsvgdiv').size(500, 300);

  let rectobj = new Rect();
  rectobj.size(20, 20).move(0, 0).fill('#f06');
  draw.add(rectobj);

  let rectobj2 = new Rect();
  rectobj2.size(20, 20).move(20, 20).fill('#f06');
  rectobj2.addTo(draw);
  
  let rectobj3 = new Rect({width: 20, height: 20, fill: '#f06', x: 40, y: 0}).addTo(draw);

  let rectobj4 = new Rect().addTo(draw);
  rectobj4.attr({width: 20, height: 20, fill: '#f06', x: 0, y: 40});
  

  draw.circle(20).move(40, 40).fill('#f06');
}

function ctaddRect()
{
  //在#svgcontaindiv中创建对象SGV标签
  let draw = SVG().addTo('#svgcontaindiv').size(300, 200);
  
  //创建对象，添加到了#svgcontaindiv中了
  let myrect = draw.rect(40, 30).move(50,50).fill('#f06');
  let mytest = draw.text('test').move(100,100).fill('#f06');


  let mytest2 = SVG("<circle>"); //这种方式创建的svg对象，但是没有添加到#svgcontaindivv中
  mytest2.move(50,50).attr({ fill: "#00B1B6","id":"circle2" });
  mytest2.radius(20);

  //添加对象
  let mytest3 = SVG('<rect width="20" height="20" fill="#00B1B6">');

  //添加到组里面
  let group = draw.group();
  //group.add(myrect);
  group.add(mytest);
  group.add(mytest2);
  group.add(mytest3);
  
}


function changeRect()
{
  let sgv = SVG("#circle");
  console.log(sgv);
  SVG("#circle").attr({ fill: "#00B0ff", "stroke": "#00ff00"});

}
function addRect()
{
  //在svgdiv中添加一个圆形
  let draw = SVG().addTo('#svgdiv').size(300, 200);
  let circle = draw.circle(50);
  circle.fill('red').move(10, 10);
  //添加类
  circle.addClass('circle');
  //设置ID
  circle.id('circle');

  //添加点击事件
  SVG("#circle").click(function() {
    console.log("svg clicked");
  })

  //添加一个矩形
  draw.rect(20, 20).attr({ fill: "#00B1B6" });

  //添加一个文本
  draw.text("Hello SVG").move(10, 10);

  //添加一个文本
  draw.text("Hello SVG").move(10, 10).attr({ "id": "text" });

}

</script>

<style scoped>

</style>