svg animation compatibility enhancement
This commit is contained in:
parent
d497dfa7d7
commit
60bf393fd7
|
@ -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"
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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"
|
||||
/>
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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"
|
||||
/>
|
||||
|
|
Loading…
Reference in New Issue