svg animation compatibility enhancement

lib/components/borderBox1/src/main.vue

@@ -1,6 +1,12 @@
 <template>
   <div class="dv-border-box-1">
-    <svg width="150px" height="150px" :key="item" v-for="item in border" :class="`${item} border`">
+    <svg
+      width="150px"
+      height="150px"
+      :key="item"
+      v-for="item in border"
+      :class="`${item} border`"
+    >
       <polygon
         fill="#4fd2dd"
         points="6,66 6,18 12,12 18,12 24,6 27,6 30,9 36,9 39,6 84,6 81,9 75,9 73.2,7 40.8,7 37.8,10.2 24,10.2 12,21 12,24 9,27 9,51 7.8,54 7.8,63"

lib/components/decoration2/src/main.vue

@@ -22,7 +22,7 @@
           dur="6s"
           calcMode="spline"
           keyTimes="0;1"
-          keySplines=".42,0,.58,1"
+          keySplines="0.42,0,0.58,1"
           repeatCount="indefinite"
         />
       </rect>

lib/components/decoration5/src/main.vue

@@ -16,7 +16,7 @@
           begin="0s"
           calcMode="spline"
           keyTimes="0;1"
-          keySplines=".4,1,.49,.98"
+          keySplines="0.4,1,0.49,0.98"
           repeatCount="indefinite"
         />
       </polyline>

lib/components/decoration6/src/main.vue

@@ -16,9 +16,9 @@
             attributeName="y"
             :values="`${point[1] - minHeights[i] / 2};${point[1] - heights[i] / 2};${point[1] - minHeights[i] / 2}`"
             :dur="`${randoms[i]}s`"
-            keyTimes="0;.5;1"
+            keyTimes="0;0.5;1"
             calcMode="spline"
-            keySplines=".42,0,.58,1;.42,0,.58,1"
+            keySplines="0.42,0,0.58,1;0.42,0,0.58,1"
             begin="0s"
             repeatCount="indefinite"
           />
@@ -26,9 +26,9 @@
             attributeName="height"
             :values="`${minHeights[i]};${heights[i]};${minHeights[i]}`"
             :dur="`${randoms[i]}s`"
-            keyTimes="0;.5;1"
+            keyTimes="0;0.5;1"
             calcMode="spline"
-            keySplines=".42,0,.58,1;.42,0,.58,1"
+            keySplines="0.42,0,0.58,1;0.42,0,0.58,1"
             begin="0s"
             repeatCount="indefinite"
           />

src/components/borderBox1/src/main.vue

@@ -1,6 +1,12 @@
 <template>
   <div class="dv-border-box-1">
-    <svg width="150px" height="150px" :key="item" v-for="item in border" :class="`${item} border`">
+    <svg
+      width="150px"
+      height="150px"
+      :key="item"
+      v-for="item in border"
+      :class="`${item} border`"
+    >
       <polygon
         fill="#4fd2dd"
         points="6,66 6,18 12,12 18,12 24,6 27,6 30,9 36,9 39,6 84,6 81,9 75,9 73.2,7 40.8,7 37.8,10.2 24,10.2 12,21 12,24 9,27 9,51 7.8,54 7.8,63"

src/components/decoration2/src/main.vue

@@ -22,7 +22,7 @@
           dur="6s"
           calcMode="spline"
           keyTimes="0;1"
-          keySplines=".42,0,.58,1"
+          keySplines="0.42,0,0.58,1"
           repeatCount="indefinite"
         />
       </rect>

src/components/decoration5/src/main.vue

@@ -16,7 +16,7 @@
           begin="0s"
           calcMode="spline"
           keyTimes="0;1"
-          keySplines=".4,1,.49,.98"
+          keySplines="0.4,1,0.49,0.98"
           repeatCount="indefinite"
         />
       </polyline>

src/components/decoration6/src/main.vue

@@ -16,9 +16,9 @@
             attributeName="y"
             :values="`${point[1] - minHeights[i] / 2};${point[1] - heights[i] / 2};${point[1] - minHeights[i] / 2}`"
             :dur="`${randoms[i]}s`"
-            keyTimes="0;.5;1"
+            keyTimes="0;0.5;1"
             calcMode="spline"
-            keySplines=".42,0,.58,1;.42,0,.58,1"
+            keySplines="0.42,0,0.58,1;0.42,0,0.58,1"
             begin="0s"
             repeatCount="indefinite"
           />
@@ -26,9 +26,9 @@
             attributeName="height"
             :values="`${minHeights[i]};${heights[i]};${minHeights[i]}`"
             :dur="`${randoms[i]}s`"
-            keyTimes="0;.5;1"
+            keyTimes="0;0.5;1"
             calcMode="spline"
-            keySplines=".42,0,.58,1;.42,0,.58,1"
+            keySplines="0.42,0,0.58,1;0.42,0,0.58,1"
             begin="0s"
             repeatCount="indefinite"
           />