<p>Derzeit verwende ich SVGator, um eine SVG-Animation zu erstellen. <br />Ich habe es als Ressource in meine Anwendung importiert und versucht, es zum Laufen zu bringen. </p><p>Ich habe die Anweisungen in diesem Dokument befolgt und es erfolgreich implementiert. </p><p>Da ich jedoch möglicherweise eine große Anzahl von Animationen erstellen muss, habe ich versucht, es allgemeiner zu gestalten. </p><p><br /></p> <pre class="brush:js;toolbar:false;"><script setup lang="ts"> import { ref, defineComponent, h, Component, watch } from 'vue'; import exampleSvg from '@assets/example.svg?raw'; Schnittstelle IComponentProperties { SVG: Zeichenfolge; } const ComponentProperties = withDefaults(defineProps<IComponentProperties>(), { svg: () => exampleSvg, }); const element = ref<HTMLElement>(); const animierteSvg = defineComponent({ render() { return h('svg', { innerHTML: ComponentProperties.svg, Ref: Element }); }, }); Funktion runAnimation() { if (!element.value) return; const { firstChild } = element.value; const svg = firstChild as any; svg?.svgatorPlayer?.play(); } betrachten( () => element.value, () => runAnimation(); }, { unmittelbar: wahr, } ); </script> <Vorlage> <Komponente :is="animatedSvg" /> </template> </pre> <p>Dies ist eine vollständige Vue-Anwendung, die denselben Code enthält. </p><p>Warum ist svg?.svgatorPlayer immer null? </p><p><strong></strong></p>

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