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

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

效果

代码如下

<template>
  <h3>测试操作已有SVG</h3>
  <button @click="changeText()">利用ID定位</button>
  <button @click="changeChild()">changeText</button>
  
  <br/>
  <div id="svgdiv">
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="500"
      height="300"> 
      <title>编组 8</title>
    <desc>Created with Sketch.</desc>
    <defs>
        <linearGradient x1="0%" y1="55.1934265%" x2="100%" y2="53.8302813%" id="linearGradient-1">
            <stop stop-color="#A5C4D6" offset="0%"></stop>
            <stop stop-color="#C2DEEE" offset="54.9605389%"></stop>
            <stop stop-color="#A6C4D7" offset="100%"></stop>
        </linearGradient>
        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-2">
            <stop stop-color="#12BCFF" offset="0%"></stop>
            <stop stop-color="#02FFF5" stop-opacity="0" offset="100%"></stop>
        </linearGradient>
        <linearGradient x1="50%" y1="15.5856635%" x2="50.9111047%" y2="67.3949442%" id="linearGradient-3">
            <stop stop-color="#27D0F9" stop-opacity="0" offset="0%"></stop>
            <stop stop-color="#FFFFFF" stop-opacity="0.256482111" offset="49.4772045%"></stop>
            <stop stop-color="#27CFFB" stop-opacity="0.657014266" offset="100%"></stop>
        </linearGradient>
        <polygon id="path-4" points="0.00292682927 0.0410609756 39.9590244 0.0410609756 39.9590244 40.0000488 0.00292682927 40.0000488"></polygon>
        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-6">
            <stop stop-color="#12BCFF" offset="0%"></stop>
            <stop stop-color="#0160E8" offset="100%"></stop>
        </linearGradient>
        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-7">
            <stop stop-color="#12BCFF" offset="0%"></stop>
            <stop stop-color="#0160E8" offset="100%"></stop>
        </linearGradient>
    </defs>
      <rect width="20" height="20" x="0" y="0" fill="#ff0066"></rect>
      <rect width="20" height="20" x="20" y="20" fill="#ff0066"></rect>
      <rect width="20" height="20" fill="#ff0066" x="40" y="0"></rect>
      <rect width="20" height="20" fill="#ff0066" x="0" y="40"></rect>
      <circle id="circle" r="10" cx="50" cy="50" fill="#ff0066"></circle>
      <text x="100" y="106"><tspan dy="0" x="10" id="textdiv">Hello SVG</tspan></text>
      <g>
        <path d="M55.875,16.5 C56.0821068,16.5 56.25,16.6678932 56.25,16.875 L56.25,25.875 C56.25,26.0821068 56.0821068,26.25 55.875,26.25 C55.6678932,26.25 55.5,26.0821068 55.5,25.875 L55.5,16.875 C55.5,16.6678932 55.6678932,16.5 55.875,16.5 Z" id="Rectangle-6" fill="url(#linearGradient-2)"></path>
                    <path d="M36.375,19.5 C36.5821068,19.5 36.75,19.6678932 36.75,19.875 L36.75,28.875 C36.75,29.0821068 36.5821068,29.25 36.375,29.25 C36.1678932,29.25 36,29.0821068 36,28.875 L36,19.875 C36,19.6678932 36.1678932,19.5 36.375,19.5 Z" id="Rectangle-6-Copy" fill="url(#linearGradient-2)" opacity="0.500905797"></path>
                    <path d="M63.375,28.5 C63.5821068,28.5 63.75,28.6678932 63.75,28.875 L63.75,37.875 C63.75,38.0821068 63.5821068,38.25 63.375,38.25 C63.1678932,38.25 63,38.0821068 63,37.875 L63,28.875 C63,28.6678932 63.1678932,28.5 63.375,28.5 Z" id="Rectangle-6-Copy-2" fill="url(#linearGradient-2)" opacity="0.500905797"></path>
                    <rect id="Rectangle-6-Copy-5" fill="url(#linearGradient-2)" opacity="0.720278533" x="57" y="46.5" width="1" height="9.75" rx="0.5"></rect>
                    <path d="M32.625,45 C32.8321068,45 33,45.1678932 33,45.375 L33,54.375 C33,54.5821068 32.8321068,54.75 32.625,54.75 C32.4178932,54.75 32.25,54.5821068 32.25,54.375 L32.25,45.375 C32.25,45.1678932 32.4178932,45 32.625,45 Z" id="Rectangle-6-Copy-6" fill="url(#linearGradient-2)" opacity="0.500905797"></path>
                    <path d="M28.875,29.25 C29.0821068,29.25 29.25,29.4178932 29.25,29.625 L29.25,38.625 C29.25,38.8321068 29.0821068,39 28.875,39 C28.6678932,39 28.5,38.8321068 28.5,38.625 L28.5,29.625 C28.5,29.4178932 28.6678932,29.25 28.875,29.25 Z" id="Rectangle-6-Copy-3" fill="url(#linearGradient-2)" opacity="0.500905797"></path>
                    <path d="M44.625,51 C44.8321068,51 45,51.1678932 45,51.375 L45,60.375 C45,60.5821068 44.8321068,60.75 44.625,60.75 C44.4178932,60.75 44.25,60.5821068 44.25,60.375 L44.25,51.375 C44.25,51.1678932 44.4178932,51 44.625,51 Z" id="Rectangle-6-Copy-4" fill="url(#linearGradient-2)" opacity="0.500905797"></path>
                    <path d="M0,62.0928688 C0.660866835,75.5939223 15.8389753,83.1462994 45.5343255,84.75 C88.8376691,83.6027592 93.0930486,67.1565 92.565431,62.0928688 L93.75,3.8052316 C78.6952656,6.46876398 63.1822994,7.80053017 47.2111013,7.80053017 C31.2399033,7.80053017 15.5028695,5.20035344 0,0 L0,62.0928688 Z" id="Path-47" fill="url(#linearGradient-3)" opacity="0.50073596"></path>
      </g>
    </svg>
  

  </div>
</template>
<script setup>

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

const testref = ref("Hello SVG");

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

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

function changeText()
{
  //利用id直接定位修改
  console.log("change text");
  SVG("#textdiv").text("new text");
  SVG("#circle").attr('fill', '#ff00ff');
  console.log(SVG("#textdiv"));
}


function changeChild()
{
  let rects = SVG("#svgdiv rect"); //获取到第一个rect
  rects.fill("#ffaa00");

  //find 获取所有的rect
  SVG("#svgdiv").find("rect").fill("#ffff00");
  console.log(rects);
}

</script>

<style scoped></style>