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"); //获取到第一个rectrects.fill("#ffaa00");//find 获取所有的rectSVG("#svgdiv").find("rect").fill("#ffff00");console.log(rects);
}</script><style scoped></style>