Vue 3 - Svgator 플레이어는 항상 정의되지 않습니다.

Question

<p>현재 저는 SVGator를 사용하여 SVG 애니메이션을 만들었습니다. <br />내 애플리케이션에 리소스로 가져와서 실행해 보았습니다. </p><p>이 문서의 지침에 따라 성공적으로 구현했습니다. </p><p>하지만 애니메이션을 많이 만들어야 할 수도 있기 때문에 좀 더 일반화하려고 노력했습니다.

<pre class="brush:js;toolbar:false;"><스크립트 설정 lang="ts"> 'vue'에서 { ref, 정의 구성 요소, h, 구성 요소, 시계 } 가져오기; '@assets/example.svg?raw'에서 exampleSvg를 가져옵니다. 인터페이스 IComponentProperties { svg: 문자열; } const componentProperties = withDefaults(defineProps<IComponentProperties>(), { svg: () => }); const 요소 = ref<HTMLElement>(); const animationSvg = 정의구성요소({ 렌더링() { return h('svg', { innerHTML: componentProperties.svg, ref: 요소 }); }, }); 함수 runAnimation() { if (!element.value) 반환; const { firstChild } = 요소.값; const svg = firstChild; svg?.svgatorPlayer?.play(); } 보다( () => 요소.값, () => 실행애니메이션(); }, { 즉각적인: 사실, } ); </스크립트> <템플릿> <구성요소:is="animatedSvg" /> </템플릿> </pre> <p>이것은 동일한 코드를 포함하는 완전한 Vue 애플리케이션입니다. </p><p>svg?.svgatorPlayer는 왜 항상 null인가요?

Answer 1

귀하의 질문에 대답하자면, firstChild는 svgatorPlayer를 포함하는 HTMLElement인 것 같습니다.

svg를 문자열로 처리하기 위해 ?raw를 사용하고 있습니다.

이 문제를 해결하려면 이 답변을 따라야 합니다.

둘째, 제공된 문서를 읽으면 svg와 함께 JavaScript를 사용하는 것이 아니라 문자열로 배치하는 것입니다. 그렇기 때문에 svgatorPlayer는 js가 실행되지 않을 때 존재하지 않기 때문에 null과 같습니다. 한 가지 해결책은 v-html에서 svg를 실행하는 것이지만 XSS 삽입 문제를 알고 있어야 합니다.

으아아아