Vue 3 - Svgator播放器始終為undefined。
P粉478835592
2023-07-28 08:44:31
<p>目前，我使用SVGator製作了SVG動畫。 <br />我將其作為資源導入到我的應用程式中，並嘗試讓它運行。 </p><p>我按照這份文件的說明成功實現了它的運作。 </p><p>但是，由於我可能需要創建大量的動畫，我嘗試將其更加通用。 </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';
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>
</pre>
<p>這是一個完整的Vue應用程序，包含相同的程式碼。 </p><p>為什麼svg?.svgatorPlayer總是null？ </p><p><strong></strong></p>
所以，為了回答你的問題，看起來你的firstChild是一個包含任何svgatorPlayer的HTMLElement。
你正在使用?raw將svg當作字串處理。
要修復這個問題，你必須按照這個答案來操作。
其次，閱讀所提供的文件後，你沒有使用JavaScript與svg一起使用，而是將其作為字串放置。這就是為什麼你的svgatorPlayer等於null，因為在js未執行時它不存在。一個解決方案是將svg放在v-html中執行，但要注意XSS注入的問題。
#<template> <div v-html="exampleSvg"></div> <Component :is="animatedSvg" /> </template>