Vue 3 - Svgator播放器始終為undefined。

Question

目前，我使用SVGator製作了SVG動畫。
我將其作為資源導入到我的應用程式中，並嘗試讓它運行。

我按照這份文件的說明成功實現了它的運作。

但是，由於我可能需要創建大量的動畫，我嘗試將其更加通用。

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

這是一個完整的Vue應用程序，包含相同的程式碼。

為什麼svg?.svgatorPlayer總是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>