Fixes: Style compatibility and gradient exceptions

Bug Fixes: Enhance the animation compatibility of borderbox1 and fix spelling errors

CHANGELOG.md

@@ -1,8 +1,30 @@
+# 2.3.8-alpha (2019-08-27)
+
+### Bug Fixes
+
+- **percentPond:** Style compatibility and gradient exceptions. 
+
+# 2.3.7-alpha (2019-08-26)
+
+### Bug Fixes
+
+- **borderBox1:** Parent container setting `text-align: center` to cause display exception [(#6)](https://github.com/jiaming743/DataV/issues/6). 
+
+# 2.3.6-alpha (2019-08-24)
+
+### Bug Fixes
+
+- **borderBox1:** Animation exception caused by incompatible syntax and spelling mistake [(#4)](https://github.com/jiaming743/DataV/issues/4)[(#5)](https://github.com/jiaming743/DataV/pull/5). 
+
+### Perfect
+
+- **svg:** Svg animation compatibility enhancement.
+
 # 2.3.5-alpha (2019-08-22)
 
 ### Bug Fixes
 
-- **activeRingChart:** Color configuration does not take effect.
+- **activeRingChart:** Color configuration does not take effect [(#3)](https://github.com/jiaming743/DataV/pull/3). 
 
 # 2.3.4-alpha (2019-08-15)
 

lib/components/borderBox1/src/main.css

@@ -5,6 +5,7 @@
 }
 .dv-border-box-1 .border {
   position: absolute;
+  display: block;
 }
 .dv-border-box-1 .right-top {
   right: 0px;

lib/components/borderBox1/src/main.vue

@@ -14,7 +14,7 @@
         <animate
           attributeName="fill"
           values="#4fd2dd;#235fa7;#4fd2dd"
-          dur=".5s"
+          dur="0.5s"
           begin="0s"
           repeatCount="indefinite"
         />
@@ -26,7 +26,7 @@
         <animate
           attributeName="fill"
           values="#235fa7;#4fd2dd;#235fa7"
-          dur=".5s"
+          dur="0.5s"
           begin="0s"
           repeatCount="indefinite"
         />
@@ -37,7 +37,7 @@
       >
         <animate
           attributeName="fill"
-          values="#4fd2dd;#235fa7;#transparent"
+          values="#4fd2dd;#235fa7;transparent"
           dur="1s"
           begin="0s"
           repeatCount="indefinite"

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

lib/components/percentPond/src/main.css

@@ -1,7 +1,15 @@
 .dv-percent-pond {
+  position: relative;
   display: flex;
   flex-direction: column;
 }
+.dv-percent-pond svg {
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  width: 100%;
+  height: 100%;
+}
 .dv-percent-pond polyline {
   transition: all 0.3s;
 }

lib/components/percentPond/src/main.vue

@@ -4,13 +4,13 @@
       <defs>
         <linearGradient :id="gradientId1" x1="0%" y1="0%" x2="100%" y2="0%">
           <stop v-for="lc in linearGradient" :key="lc[0]"
-            :offset="lc[0]"
+            :offset="`${lc[0]}%`"
             :stop-color="lc[1]" />
         </linearGradient>
 
         <linearGradient :id="gradientId2" x1="0%" y1="0%" :x2="gradient2XPos" y2="0%">
           <stop v-for="lc in linearGradient" :key="lc[0]"
-            :offset="lc[0]"
+            :offset="`${lc[0]}%`"
             :stop-color="lc[1]" />
         </linearGradient>
       </defs>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jiaminghi/data-view",
-  "version": "2.3.5",
+  "version": "2.3.8",
   "author": "JiaMing <743192023@qq.com>",
   "description": "Vue Large screen data display component library",
   "main": "lib/index.js",

src/components/borderBox1/src/main.vue

@@ -14,7 +14,7 @@
         <animate
           attributeName="fill"
           values="#4fd2dd;#235fa7;#4fd2dd"
-          dur=".5s"
+          dur="0.5s"
           begin="0s"
           repeatCount="indefinite"
         />
@@ -26,7 +26,7 @@
         <animate
           attributeName="fill"
           values="#235fa7;#4fd2dd;#235fa7"
-          dur=".5s"
+          dur="0.5s"
           begin="0s"
           repeatCount="indefinite"
         />
@@ -37,7 +37,7 @@
       >
         <animate
           attributeName="fill"
-          values="#4fd2dd;#235fa7;#transparent"
+          values="#4fd2dd;#235fa7;transparent"
           dur="1s"
           begin="0s"
           repeatCount="indefinite"
@@ -70,6 +70,7 @@ export default {
 
   .border {
     position: absolute;
+    display: block;
   }
 
   .right-top {

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

src/components/percentPond/src/main.vue

@@ -4,13 +4,13 @@
       <defs>
         <linearGradient :id="gradientId1" x1="0%" y1="0%" x2="100%" y2="0%">
           <stop v-for="lc in linearGradient" :key="lc[0]"
-            :offset="lc[0]"
+            :offset="`${lc[0]}%`"
             :stop-color="lc[1]" />
         </linearGradient>
 
         <linearGradient :id="gradientId2" x1="0%" y1="0%" :x2="gradient2XPos" y2="0%">
           <stop v-for="lc in linearGradient" :key="lc[0]"
-            :offset="lc[0]"
+            :offset="`${lc[0]}%`"
             :stop-color="lc[1]" />
         </linearGradient>
       </defs>
@@ -254,9 +254,18 @@ export default {
 
 <style lang="less">
 .dv-percent-pond {
+  position: relative;
   display: flex;
   flex-direction: column;
 
+  svg {
+    position: absolute;
+    left: 0px;
+    top: 0px;
+    width: 100%;
+    height: 100%;
+  }
+
   polyline {
     transition: all 0.3s;
   }