Closed Neon22 closed 11 months ago
I found a closed issue that was very useful:
svg.js runs on the regurlar dom and cant work on a vdom that vue creates. If you want to use svg.js in vue you need to get a reference to a dom element and pass that to svg.js. However to be clear: You will not have the advantages of the vdom and reactivity with svg.js. Svg.js just builds a little bit of dom for you. You have to maintain that piece yourself.
For reference a quick example:
<template>
<div ref="canvasRef" />
</template>
<script setup>
import { onMounted, onUpdated, ref } from 'vue'
import { SVG } from '@svgdotjs/svgjs'
const canvasRef = ref()
const drawCanvas = () => {
const canvas = SVG().addTo(canvasRef.value)
canvas.text('Hello World')
}
// have to redraw on every rerender
onMounted(drawCanvas)
onUpdated(drawCanvas)
</script>
Feature request
I love svgdotjs but would like to use it in Vue3 reactively for fairly complex weaving tool. I'm using Vite and Vue3 (Node.js). Does anyone know of a Vue3 wrapper ? Do I even need one ?
Svgdom doesn't appear to be fully formed but I think its regular svgdotjs I need instead.
There is non svgdotjs version here for Vue3 but it is very limited. I'd very much rather use svgdotjs.
Stackexchange suggests we don't need one (a wrapper) but I can't get it to work in Vite/Vue3:
My Vite/Vue3 foo is weak. My environment is: