Animation webpack加载动态Vue组件时SVG动画暂停

我正在创建一个Vue应用程序，其中根组件从主App.Vue组件动态加载（通过导入（“”）指令）

在我的App.vue组件中，我放置了一个包含无限动画SVG（通过

标记）和异步加载控件的组件。想法是SVG应该一直处于动画状态，直到动态加载的控件加载完毕，然后我将隐藏它。
然而，这并没有发生。SVG在第一帧中永久冻结，直到加载并解析dynamic component.js文件。之后SVG开始制作动画，但到那时已经太晚了

以下是App.vue：

<template>
    <div style="height: 100%; width: 100%;">
        <loading v-if="loadingDisplayed" ></loading>
        <app-root @hook:mounted="onAppMounted"></app-root>
    </div>
</template>
<script lang="ts">

    import { Component, Vue } from 'vue-property-decorator';
    import Loading from './Components/Loading.vue'

    //import AppRoot from './Components/AppRoot.vue'
    const AppRoot = () => import(/* webpackChunkName: "root" */ './Components/AppRoot.vue').then(m => m.default);


    @Component({
        components: { AppRoot, Loading }
    })
    export default class App extends Vue {

        loadingDisplayed: boolean = true;

        onAppMounted() : void {
            this.loadingDisplayed = false;
        }

    }

</script>

从“Vue属性装饰器”导入{Component，Vue}；
从“./Components/Loading.vue”导入加载
//从“./Components/approt.vue”导入Approt
const approt=（）=>import（/*webpackChunkName:“root”*/'./Components/approt.vue'）。然后（m=>m.default）；
@组成部分({
组件：{AppRoot，Loading}
})
导出默认类应用程序扩展Vue{
加载显示：布尔值=真；
onAppMounted（）：void{
this.loadingdisplated=false；
}
}

这是加载控件：

<template>
    <div class="loader">
        <div style="flex-basis: 20%;">
            My title
        </div>
        <div>
            {{txt_loading}}
        </div>
        <div style="flex-basis: 80%;">
            <svg width="100%" height="100%" viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg" stroke="#fff">
                <g fill="none" fill-rule="evenodd" stroke-width="2">
                    <circle cx="22" cy="22" r="1" stroke="black">
                        <animate attributeName="r"
                                 begin="0s" dur="1.8s"
                                 values="1; 20"
                                 calcMode="spline"
                                 keyTimes="0; 1"
                                 keySplines="0.165, 0.84, 0.44, 1"
                                 repeatCount="indefinite" />
                        <animate attributeName="stroke-opacity"
                                 begin="0s" dur="1.8s"
                                 values="1; 0"
                                 calcMode="spline"
                                 keyTimes="0; 1"
                                 keySplines="0.3, 0.61, 0.355, 1"
                                 repeatCount="indefinite" />
                    </circle>
                    <circle cx="22" cy="22" r="1" stroke="black">
                        <animate attributeName="r"
                                 begin="-0.9s" dur="1.8s"
                                 values="1; 20"
                                 calcMode="spline"
                                 keyTimes="0; 1"
                                 keySplines="0.165, 0.84, 0.44, 1"
                                 repeatCount="indefinite" />
                        <animate attributeName="stroke-opacity"
                                 begin="-0.9s" dur="1.8s"
                                 values="1; 0"
                                 calcMode="spline"
                                 keyTimes="0; 1"
                                 keySplines="0.3, 0.61, 0.355, 1"
                                 repeatCount="indefinite" />
                    </circle>
                </g>
            </svg>
        </div>
    </div>
</template>
<script lang="ts">

    import { Component, Vue } from 'vue-property-decorator';

    @Component
    export default class Loading extends Vue {
        txt_loading : "Please wait"
    }

</script>
<style lang="scss" scoped>
    .loader {
        height: 100%;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        font-size: 2em;
        font-weight: bold;
    }

</style>

我的头衔
{{txt_loading}}
从“Vue属性装饰器”导入{Component，Vue}；
@组成部分
导出默认类加载扩展Vue{
正在加载txt_：“请稍候”
}
.加载器{
身高：100%；
宽度：100%；
显示器：flex；
对齐项目：居中；
证明内容：中心；
弯曲方向：立柱；
字号：2em；
字体大小：粗体；
}

---

这是正常的行为还是在浏览器加载.js文件时有办法让SVG动画化？

你有没有想过这个问题？没有，我切换到React并开始使用CSS动画。你有没有想过这个问题？没有，我切换到React并开始使用CSS动画。