svg实现loading图

本文主要针对我工作遇到的问题，类似于笔记。
首先想要实现svg的动画要首先了解svg中的两个属性：stroke-dasharray；stroke-dashoffset；
stroke-dasharray：就是虚线属性，可以写多个值；
stroke-dashoffset：可以理解为空隙；
注：stroke-dashoffset的值可以为负数；
根据UI给的SVG格式的文件：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 51 47.03">
            <defs>
                <style> .cls-1,.cls-2,.cls-3{ fill:none; stroke:#3eb2de; stroke-linejoin:round; } .cls-1,.cls-2{ stroke-linecap:round; } .cls-1{ stroke-width:2px; } .cls-2,.cls-3{ stroke-width:3px; } .cls-4{ clip-path:url(#clip-path); } .cls-g{ stroke:#ccc } style>
                <clipPath id="clip-path">
                    <ellipse class="cls-1" cx="12.69" cy="27.26" rx="1" ry="1.01"/>
                clipPath>
            defs>
            <title>loading-2title>
            <g id="layer_2" data-name="layer 2">
                <g id="layer_1-2" data-name="layer 1">
                    <path class="cls-2 cls-g" d="M34.59,20.39l5-4.2a6,6,0,0,1,7.69,9.17l-4.81,4,4.81,3.89a6,6,0,0,1-7.53,9.3l-6-4.9c-3.54,4.53-9.3,7.83-15.12,7.83-9.39,0-17.09-8.6-17.09-17.1s7.7-17.1,17.09-17.1C24.92,11.33,31.18,15.24,34.59,20.39Z"/>
                    <path class="cls-3 cls-g" d="M21.84,6.65A6.19,6.19,0,1,1,34,8.8,6.12,6.12,0,0,1,33,11.33"/>
                    <g class="cls-4">
                        <rect class="cls-1" x="5.41" y="19.97" width="14.57" height="14.58"/>
                    g>
                    <ellipse class="cls-1 cls-g" cx="12.69" cy="27.26" rx="1" ry="1.01"/>
                g>
            g>
            <defs>
                <clipPath id="clip-path">
                    <ellipse class="cls-1" cx="12.69" cy="27.26" rx="1" ry="1.01"/>
                clipPath>
            defs>
            <title>loading-2title>
                <g id="layer_2" data-name="layer 2">
                    <g id="layer_1-2" data-name="layer 1">
                        <path class="cls-2 cls-2-a" d="M34.59,20.39l5-4.2a6,6,0,0,1,7.69,9.17l-4.81,4,4.81,3.89a6,6,0,0,1-7.53,9.3l-6-4.9c-3.54,4.53-9.3,7.83-15.12,7.83-9.39,0-17.09-8.6-17.09-17.1s7.7-17.1,17.09-17.1C24.92,11.33,31.18,15.24,34.59,20.39Z"/>
                        <path class="cls-3 cls-3-a" d="M21.84,6.65A6.19,6.19,0,1,1,34,8.8,6.12,6.12,0,0,1,33,11.33"/>
                        <g class="cls-4"><rect class="cls-1" x="5.41" y="19.97" width="14.57" height="14.58"/>g><ellipse class="cls-1 cls-1-a" cx="12.69" cy="27.26" rx="1" ry="1.01"/>
                    g>
                g>

        svg>

然后给了我效果图
主要过程呢分为三段，一个是鱼鳍，鱼眼睛，鱼身子，通过改变上述两个的值从而实现，但是过程中因为不知道stroke-dashoffset的值可以为负数所以导致效果是反的。这点要注意。
最后的实现效果加上兼容。

    <style> .cls-1-a{ stroke-dasharray:7 7; stroke-dashoffset:-7; animation: lineMoveCls1 1.64s ease-in-out infinite; } .cls-2-a{ stroke-dasharray:153 153; stroke-dashoffset:-153; animation: lineMoveCls2 1.64s ease-in-out infinite; } .cls-3-a{ stroke-dasharray:23 23; stroke-dashoffset:-23; animation: lineMoveCls3 1.64s ease-in-out infinite; } .loading-svg-fish{ position: relative; width: 1.36rem; height: 1.24rem; } .fishpond-index{ height: 100vh; display:flex; display:-webkit-flex; display:-moz-flex; display:-o-flex; align-items: center; -webkit-align-items: center; -moz-align-items: center; -o-align-items: center; -webkit-justify-content: center; -moz-justify-content: center; -o-justify-content: center; justify-content: center; flex-direction: column; -webkit-flex-direction: column; -moz-flex-direction: column; -o-flex-direction: column; } .loading-write-fish{ font-size:0.52rem ; color: #ccc; margin-top: 0.48rem; } svg{ position: absolute; left: 0; top: 0; width: 1.36rem; height: 1.24rem; } .cls-1,.cls-2,.cls-3{ fill:none; stroke:#3eb2de; stroke-linejoin:round; } .cls-1,.cls-2{ stroke-linecap:round; } .cls-1{ stroke-width:2px; } .cls-2,.cls-3{ stroke-width:3px; } .cls-4{ clip-path:url(#clip-path); } .cls-g{ stroke:#ccc } @keyframes lineMoveCls1 { 0%{ stroke-dashoffset:-7 ; } 10%{ stroke-dashoffset:0 ; } 20%{ stroke-dashoffset:0 ; } 30%{ stroke-dashoffset:0 ; } 40%{ stroke-dashoffset:0 ; } 50%{ stroke-dashoffset:0 ; } 60%{ stroke-dashoffset:7 ; } 70%{ stroke-dashoffset: 7; } 80%{ stroke-dashoffset:7 ; } 90%{ stroke-dashoffset:7 ; } 100%{ stroke-dashoffset: 7; } } @-webkit-keyframes lineMoveCls1 { 0%{ stroke-dashoffset:-7 ; } 10%{ stroke-dashoffset:0 ; } 20%{ stroke-dashoffset:0 ; } 30%{ stroke-dashoffset:0 ; } 40%{ stroke-dashoffset:0 ; } 50%{ stroke-dashoffset:0 ; } 60%{ stroke-dashoffset:7 ; } 70%{ stroke-dashoffset: 7; } 80%{ stroke-dashoffset:7 ; } 90%{ stroke-dashoffset:7 ; } 100%{ stroke-dashoffset: 7; } } @-moz-keyframes lineMoveCls1 { 0%{ stroke-dashoffset:-7 ; } 10%{ stroke-dashoffset:0 ; } 20%{ stroke-dashoffset:0 ; } 30%{ stroke-dashoffset:0 ; } 40%{ stroke-dashoffset:0 ; } 50%{ stroke-dashoffset:0 ; } 60%{ stroke-dashoffset:7 ; } 70%{ stroke-dashoffset: 7; } 80%{ stroke-dashoffset:7 ; } 90%{ stroke-dashoffset:7 ; } 100%{ stroke-dashoffset: 7; } } @-o-keyframes lineMoveCls1 { 0%{ stroke-dashoffset:-7 ; } 10%{ stroke-dashoffset:0 ; } 20%{ stroke-dashoffset:0 ; } 30%{ stroke-dashoffset:0 ; } 40%{ stroke-dashoffset:0 ; } 50%{ stroke-dashoffset:0 ; } 60%{ stroke-dashoffset:7 ; } 70%{ stroke-dashoffset: 7; } 80%{ stroke-dashoffset:7 ; } 90%{ stroke-dashoffset:7 ; } 100%{ stroke-dashoffset: 7; } } @keyframes lineMoveCls3 { 0%{ stroke-dashoffset:-23 ; } 10%{ stroke-dashoffset:-23 ; } 20%{ stroke-dashoffset:0 ; } 30%{ stroke-dashoffset:0 ; } 40%{ stroke-dashoffset:0 ; } 50%{ stroke-dashoffset:0 ; } 60%{ stroke-dashoffset:0 ; } 70%{ stroke-dashoffset: 23; } 80%{ stroke-dashoffset:23 ; } 90%{ stroke-dashoffset:23 ; } 100%{ stroke-dashoffset: 23; } } @-webkit-keyframes lineMoveCls3 { 0%{ stroke-dashoffset:-23 ; } 10%{ stroke-dashoffset:-23 ; } 20%{ stroke-dashoffset:0 ; } 30%{ stroke-dashoffset:0 ; } 40%{ stroke-dashoffset:0 ; } 50%{ stroke-dashoffset:0 ; } 60%{ stroke-dashoffset:0 ; } 70%{ stroke-dashoffset: 23; } 80%{ stroke-dashoffset:23 ; } 90%{ stroke-dashoffset:23 ; } 100%{ stroke-dashoffset: 23; } } @-moz-keyframes lineMoveCls3 { 0%{ stroke-dashoffset:-23 ; } 10%{ stroke-dashoffset:-23 ; } 20%{ stroke-dashoffset:0 ; } 30%{ stroke-dashoffset:0 ; } 40%{ stroke-dashoffset:0 ; } 50%{ stroke-dashoffset:0 ; } 60%{ stroke-dashoffset:0 ; } 70%{ stroke-dashoffset: 23; } 80%{ stroke-dashoffset:23 ; } 90%{ stroke-dashoffset:23 ; } 100%{ stroke-dashoffset: 23; } } @-o-keyframes lineMoveCls3 { 0%{ stroke-dashoffset:-23 ; } 10%{ stroke-dashoffset:-23 ; } 20%{ stroke-dashoffset:0 ; } 30%{ stroke-dashoffset:0 ; } 40%{ stroke-dashoffset:0 ; } 50%{ stroke-dashoffset:0 ; } 60%{ stroke-dashoffset:0 ; } 70%{ stroke-dashoffset: 23; } 80%{ stroke-dashoffset:23 ; } 90%{ stroke-dashoffset:23 ; } 100%{ stroke-dashoffset: 23; } } @keyframes lineMoveCls2 { 0%{ stroke-dashoffset:-153 ; } 10%{ stroke-dashoffset:-153 ; } 20%{ stroke-dashoffset:-153 ; } 30%{ stroke-dashoffset:-102 ; } 40%{ stroke-dashoffset:-51 ; } 50%{ stroke-dashoffset:0 ; } 60%{ stroke-dashoffset:0 ; } 70%{ stroke-dashoffset: 0; } 80%{ stroke-dashoffset:51 ; } 90%{ stroke-dashoffset:102 ; } 100%{ stroke-dashoffset: 153; } } @-webkit-keyframes lineMoveCls2 { 0%{ stroke-dashoffset:-153 ; } 10%{ stroke-dashoffset:-153 ; } 20%{ stroke-dashoffset:-153 ; } 30%{ stroke-dashoffset:-102 ; } 40%{ stroke-dashoffset:-51 ; } 50%{ stroke-dashoffset:0 ; } 60%{ stroke-dashoffset:0 ; } 70%{ stroke-dashoffset: 0; } 80%{ stroke-dashoffset:51 ; } 90%{ stroke-dashoffset:102 ; } 100%{ stroke-dashoffset: 153; } } @-moz-keyframes lineMoveCls2 { 0%{ stroke-dashoffset:-153 ; } 10%{ stroke-dashoffset:-153 ; } 20%{ stroke-dashoffset:-153 ; } 30%{ stroke-dashoffset:-102 ; } 40%{ stroke-dashoffset:-51 ; } 50%{ stroke-dashoffset:0 ; } 60%{ stroke-dashoffset:0 ; } 70%{ stroke-dashoffset: 0; } 80%{ stroke-dashoffset:51 ; } 90%{ stroke-dashoffset:102 ; } 100%{ stroke-dashoffset: 153; } } @-o-keyframes lineMoveCls2 { 0%{ stroke-dashoffset:-153 ; } 10%{ stroke-dashoffset:-153 ; } 20%{ stroke-dashoffset:-153 ; } 30%{ stroke-dashoffset:-102 ; } 40%{ stroke-dashoffset:-51 ; } 50%{ stroke-dashoffset:0 ; } 60%{ stroke-dashoffset:0 ; } 70%{ stroke-dashoffset: 0; } 80%{ stroke-dashoffset:51 ; } 90%{ stroke-dashoffset:102 ; } 100%{ stroke-dashoffset: 153; } } style>
<div class="fish-loading">
    <div class="loading-svg-fish">
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 51 47.03">
            <defs>
                <style> .cls-1,.cls-2,.cls-3{ fill:none; stroke:#3eb2de; stroke-linejoin:round; } .cls-1,.cls-2{ stroke-linecap:round; } .cls-1{ stroke-width:2px; } .cls-2,.cls-3{ stroke-width:3px; } .cls-4{ clip-path:url(#clip-path); } .cls-g{ stroke:#ccc } style>
                <clipPath id="clip-path">
                    <ellipse class="cls-1" cx="12.69" cy="27.26" rx="1" ry="1.01"/>
                clipPath>
            defs>
            <title>loading-2title>
            <g id="layer_2" data-name="layer 2">
                <g id="layer_1-2" data-name="layer 1">
                    <path class="cls-2 cls-g" d="M34.59,20.39l5-4.2a6,6,0,0,1,7.69,9.17l-4.81,4,4.81,3.89a6,6,0,0,1-7.53,9.3l-6-4.9c-3.54,4.53-9.3,7.83-15.12,7.83-9.39,0-17.09-8.6-17.09-17.1s7.7-17.1,17.09-17.1C24.92,11.33,31.18,15.24,34.59,20.39Z"/>
                    <path class="cls-3 cls-g" d="M21.84,6.65A6.19,6.19,0,1,1,34,8.8,6.12,6.12,0,0,1,33,11.33"/>
                    <g class="cls-4">
                        <rect class="cls-1" x="5.41" y="19.97" width="14.57" height="14.58"/>
                    g>
                    <ellipse class="cls-1 cls-g" cx="12.69" cy="27.26" rx="1" ry="1.01"/>
                g>
            g>
            <defs>
                <clipPath id="clip-path">
                    <ellipse class="cls-1" cx="12.69" cy="27.26" rx="1" ry="1.01"/>
                clipPath>
            defs>
            <title>loading-2title>
                <g id="layer_2" data-name="layer 2">
                    <g id="layer_1-2" data-name="layer 1">
                        <path class="cls-2 cls-2-a" d="M34.59,20.39l5-4.2a6,6,0,0,1,7.69,9.17l-4.81,4,4.81,3.89a6,6,0,0,1-7.53,9.3l-6-4.9c-3.54,4.53-9.3,7.83-15.12,7.83-9.39,0-17.09-8.6-17.09-17.1s7.7-17.1,17.09-17.1C24.92,11.33,31.18,15.24,34.59,20.39Z"/>
                        <path class="cls-3 cls-3-a" d="M21.84,6.65A6.19,6.19,0,1,1,34,8.8,6.12,6.12,0,0,1,33,11.33"/>
                        <g class="cls-4"><rect class="cls-1" x="5.41" y="19.97" width="14.57" height="14.58"/>g><ellipse class="cls-1 cls-1-a" cx="12.69" cy="27.26" rx="1" ry="1.01"/>
                    g>
                g>

        svg>
    div>
    <div class="loading-write-fish">
        loading
    div>
div>