How to use with vue3 about keyshapejs

[Pixofield]

I haven't tried embedding SVG in Vue 3, but I would assume that there are some ways to use the <img> tag or the <object> tag to do that. The object tag is the best way to embed interactive SVG files.

Alternatively, you can try inlining SVG with CSS animations.

[travbus]

There is a way to get script tags into vue 3 I've tried a few ways. It's just not working. It's probably a vite thing. I'll post in there forum and see what they say. If I export with css animations the svg plays . I need to control it though, programmatically.

[travbus]

Happy days I got it to work. I went back to the onboarding example and was able to get it working. Had to change a few things but not to much. I was copying the data from the clipboard and pasting it in. Once i exported as an entire svg and imported that file I had access.

<script setup lang="ts" >


import candySvg from '~/assets/candy.svg'


const svgEl = ref()

const nextBtn = () => {
    console.log(svgEl.value.contentDocument)
    if (svgEl.value.contentDocument && svgEl.value.contentDocument.defaultView.KeyshapeJS) {
        var ks = svgEl.value.contentDocument.defaultView.KeyshapeJS;
        console.log('ks', ks)

        var timeline = ks.timelines()[0];
        console.log('ks.timelines()[0]', ks.timelines()[0])
        var markerTimes = Object.values(timeline.markers());
        console.log('markerTimes', markerTimes)
        for (var i = 0; i < markerTimes.length; i++) {
            var markerTime: any = markerTimes[i];
            console.log('markerTimes', markerTimes)
            console.log('timeline.time()', timeline.time())
            console.log('markerTime', markerTime.time)

            if (timeline.time() < markerTime.time) {
                console.log('markerTimes[i - 1]', markerTimes[i - 1].time)
                console.log('markerTime', markerTime.time)
                timeline.range(markerTimes[i - 1].time, markerTime.time);


                ks.globalPlay();
                timeline.play();
                return;
            }
        }
    }
}

const goToStart = () => {
    if (svgEl.value.contentDocument && svgEl.value.contentDocument.defaultView.KeyshapeJS) {
        var timeline = svgEl.value.contentDocument.defaultView.KeyshapeJS.timelines()[0];
        timeline.pause(0);
    }
}
</script>

 
<template>
    <object ref="svgEl" id="candy-svg" :data="candySvg + '?global=paused'" type="image/svg+xml"></object>
    <p>
        <button id="go-to-start" v-on:click="goToStart()">Go to Start</button>
        <button id="next" v-on:click="nextBtn()">Next</button>
    </p>
</template>
<route lang="yaml">
meta:
  layout: home
</route>