Vue 3 - Svgator プレーヤーは常に未定義です。-PHP中国語ネットワークQ&A

現在、SVGatorを使用してSVGアニメーションを作成しています。
これをリソースとしてアプリケーションにインポートし、実行してみました。

このドキュメントの指示に従い、正常に実装しました。

ただし、大量のアニメーションを作成する必要があるかもしれないので、より一般的なものにしてみました。

<スクリプトセットアップ lang="ts"> import { ref、defineComponent、h、component、watch } from 'vue'; '@assets/example.svg?raw' から exampleSvg をインポートします。 インターフェース IComponentProperties { SVG: 文字列; } constComponentProperties = withDefaults(defineProps(), { 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" />

これは、同じコードを含む完全な Vue アプリケーションです。

svg?.svgatorPlayer が常に null なのはなぜですか?

全員に返信 (1)

P粉4550931232023-07-29 00:05:50 1棟

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

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

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

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

リーリー