Vue 3 - Le lecteur Svgator est toujours indéfini.

Question

Actuellement, j'utilise SVGator pour créer une animation SVG.
Je l'ai importé en tant que ressource dans mon application et j'ai essayé de le faire fonctionner.

J'ai suivi les instructions de ce document et je l'ai mis en œuvre avec succès.

Cependant, comme je devrai peut-être créer un grand nombre d'animations, j'ai essayé de le rendre plus général.

import { ref, definitionComponent, h, composant, watch } depuis 'vue' ;
importer exampleSvg depuis '@assets/example.svg?raw' ;
interface IComponentProperties {
  svg : chaîne ;
}
const composantProperties = withDefaults(defineProps(), {
  svg : () =>
});
const élément = ref();

const animéSvg = définirComponent({
  rendre() {
    return h('svg', { innerHTML : composantProperties.svg, ref : élément });
  },
});
fonction runAnimation() {
  si (!element.value) retourne ;
  const { firstChild } = element.value;
  const svg = firstChild comme n'importe quel ;
  svg?.svgatorPlayer?.play();
}
montre(
  () => élément.valeur,
  () =>
    runAnimation();
  },
  {
    immédiat : vrai,
  }
);


  

≪/pré>
Il s'agit d'une application Vue complète contenant le même code. 
Pourquoi svg?.svgatorPlayer est-il toujours nul ? 

Answer 1

Donc, pour répondre à votre question, il semble que votre firstChild soit un HTMLElement contenant n'importe quel svgatorPlayer.

Vous utilisez ?raw pour traiter le svg comme une chaîne.

Pour résoudre ce problème, vous devez suivre cette réponse.

Deuxièmement, en lisant la documentation fournie, vous n'utilisez pas JavaScript avec le svg, mais vous le placez plutôt sous forme de chaîne. C'est pourquoi votre svgatorPlayer est égal à null, car il n'existe pas lorsque le js n'est pas exécuté. Une solution consiste à exécuter le svg en v-html, mais soyez conscient du problème de l'injection XSS.

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