<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> 
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
それでは、あなたの質問に答えると、firstChild は svgatorPlayer を含む HTMLElement であるようです。
?raw を使用して SVG を文字列として処理しています。
この問題を解決するには、この回答に従う必要があります。
次に、提供されているドキュメントを読むと、svg で JavaScript を使用しているのではなく、文字列として配置していることがわかります。これが、svgatorPlayer が null に等しい理由です。js が実行されていない場合、svgatorPlayer は存在しないからです。解決策の 1 つは、v-html で svg を実行することですが、XSS インジェクションの問題に注意してください。
リーリー