From e069d52544a2d45043d5ed9599416762b051a2a7 Mon Sep 17 00:00:00 2001
From: jiaming743 <743192023@qq.com>
Date: Tue, 27 Aug 2019 10:21:42 +0800
Subject: [PATCH] Fixes: Style compatibility and gradient exceptions

---
 lib/components/percentPond/src/main.css |  8 ++++++++
 lib/components/percentPond/src/main.vue |  4 ++--
 src/components/percentPond/src/main.vue | 13 +++++++++++--
 3 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/lib/components/percentPond/src/main.css b/lib/components/percentPond/src/main.css
index 8406aae..82f8458 100644
--- a/lib/components/percentPond/src/main.css
+++ b/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;
 }
diff --git a/lib/components/percentPond/src/main.vue b/lib/components/percentPond/src/main.vue
index 6d8bd4f..dd45060 100644
--- a/lib/components/percentPond/src/main.vue
+++ b/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>
diff --git a/src/components/percentPond/src/main.vue b/src/components/percentPond/src/main.vue
index 7105267..86edadc 100644
--- a/src/components/percentPond/src/main.vue
+++ b/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;
   }