svg animation compatibility enhancement

This commit is contained in:
jiaming743 2019-08-24 13:05:15 +08:00
parent d497dfa7d7
commit 60bf393fd7
8 changed files with 26 additions and 14 deletions

View File

@ -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"

View File

@ -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>

View File

@ -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>

View File

@ -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"
/>

View File

@ -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"

View File

@ -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>

View File

@ -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>

View File

@ -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"
/>