Vue 3 - Svgator player is always undefined.

Question

Currently, I used SVGator to create an SVG animation.
I imported it as a resource into my application and tried to get it running.

I followed the instructions in this document and successfully implemented it.

However, since I may need to create a large number of animations, I tried to make it more general.

<script setup lang="ts">
import { ref, defineComponent, h, component, watch } from 'vue';
import exampleSvg from '@assets/example.svg?raw';
interface IComponentProperties {
  svg: string;
}
const componentProperties = withDefaults(defineProps<IComponentProperties>(), {
  svg: () => exampleSvg,
});
const element = ref<HTMLElement>();

const animatedSvg = defineComponent({
  render() {
    return h('svg', { innerHTML: componentProperties.svg, ref: element });
  },
});
function runAnimation() {
  if (!element.value) return;
  const { firstChild } = element.value;
  const svg = firstChild as any;
  svg?.svgatorPlayer?.play();
}
watch(
  () => element.value,
  () => {
    runAnimation();
  },
  {
    immediate: true,
  }
);
</script>
<template>
  <Component :is="animatedSvg" />
</template>

This is a complete Vue application containing the same code.

Why is svg?.svgatorPlayer always null?

Answer 1

So, to answer your question, it looks like your firstChild is an HTMLElement containing any svgatorPlayer.

You are using ?raw to process the svg as a string.

To fix this problem you must follow this answer.

Secondly, reading the documentation provided, you are not using JavaScript with the svg, but rather placing it as a string. That's why your svgatorPlayer is equal to null, because it doesn't exist when the js is not executed. One solution is to execute the svg in v-html, but be aware of the problem of XSS injection.

##

<template>
  <div v-html="exampleSvg"></div>
  <Component :is="animatedSvg" />
</template>