Vue 3 - Svgator プレーヤーは常に未定義です。

Question

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

Answer 1

それでは、あなたの質問に答えると、firstChild は svgatorPlayer を含む HTMLElement であるようです。

?raw を使用して SVG を文字列として処理しています。

この問題を解決するには、この回答に従う必要があります。

次に、提供されているドキュメントを読むと、svg で JavaScript を使用しているのではなく、文字列として配置していることがわかります。これが、svgatorPlayer が null に等しい理由です。js が実行されていない場合、svgatorPlayer は存在しないからです。解決策の 1 つは、v-html で svg を実行することですが、XSS インジェクションの問題に注意してください。

リーリー