Vue 3 - Svgator プレーヤーは常に未定義です。
<p>現在、SVGatorを使用してSVGアニメーションを作成しています。 <br />これをリソースとしてアプリケーションにインポートし、実行してみました。 </p><p>このドキュメントの指示に従い、正常に実装しました。 </p><p>ただし、大量のアニメーションを作成する必要があるかもしれないので、より一般的なものにしてみました。 </p>
<pre class="brush:js;toolbar:false;"><スクリプトセットアップ lang="ts">
import { ref、defineComponent、h、component、watch } from 'vue';
'@assets/example.svg?raw' から exampleSvg をインポートします。
インターフェース IComponentProperties {
SVG: 文字列;
}
constComponentProperties = withDefaults(defineProps<IComponentProperties>(), {
svg: () => 例Svg,
});
const 要素 = ref
();
const animeSvg =defineComponent({
与える（） {
return h('svg', { innerHTML:componentProperties.svg, ref:要素 });
}、
});
関数 runAnimation() {
if (!element.value) が戻る;
const { firstChild } = 要素.値;
const svg = firstChild as any;
svg?.svgatorPlayer?.play();
}
時計（
() => 要素.値、
() => {
runAnimation();
}、
{
即時: true、
}
);
</スクリプト>
<テンプレート>
<コンポーネント :is="animatedSvg" />
</テンプレート>
</pre>
<p>これは、同じコードを含む完全な Vue アプリケーションです。 </p><p>svg?.svgatorPlayer が常に null なのはなぜですか? </p><p><strong></strong></p>
