Vue 3 – Der SVGator-Player ist immer undefiniert.

Question

Derzeit verwende ich SVGator, um eine SVG-Animation zu erstellen.
Ich habe es als Ressource in meine Anwendung importiert und versucht, es zum Laufen zu bringen.

Ich habe die Anweisungen in diesem Dokument befolgt und es erfolgreich implementiert.

Da ich jedoch möglicherweise eine große Anzahl von Animationen erstellen muss, habe ich versucht, es allgemeiner zu gestalten.

<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>

Dies ist eine vollständige Vue-Anwendung, die denselben Code enthält.

Warum ist svg?.svgatorPlayer immer null?

Answer 1

所以，为了回答你的问题，看起来你的firstChild是一个包含任何svgatorPlayer的HTMLElement。

你正在使用?raw将svg作为字符串处理。

要修复这个问题，你必须按照这个答案进行操作。

其次，阅读所提供的文档后，你没有使用JavaScript与svg一起使用，而是将其作为字符串放置。这就是为什么你的svgatorPlayer等于null，因为在js未执行时它不存在。一个解决方案是将svg放在v-html中执行，但要注意XSS注入的问题。

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