From d28e535d0370e230945705cae36dfa1d95132361 Mon Sep 17 00:00:00 2001
From: John <John60676@qq.com>
Date: Fri, 15 Jan 2021 17:25:16 +0800
Subject: [PATCH] fix(Circle): the gradient color is incorrect (#7910)

fix #7897
---
 src/circle/index.js                             | 9 ++-------
 src/circle/test/__snapshots__/demo.spec.js.snap | 8 ++++----
 2 files changed, 6 insertions(+), 11 deletions(-)

diff --git a/src/circle/index.js b/src/circle/index.js
index 2f1764fa6..e2b9f64d6 100644
--- a/src/circle/index.js
+++ b/src/circle/index.js
@@ -84,7 +84,7 @@ export default createComponent({
       const offset = (PERIMETER * this.value) / 100;
 
       return {
-        stroke: `${this.color}`,
+        stroke: `${this.gradient ? `url(#${this.uid})` : this.color}`,
         strokeWidth: `${+this.strokeWidth + 1}px`,
         strokeLinecap: this.strokeLinecap,
         strokeDasharray: `${offset}px ${PERIMETER}px`,
@@ -158,12 +158,7 @@ export default createComponent({
         <svg viewBox={`0 0 ${this.viewBoxSize} ${this.viewBoxSize}`}>
           {this.LinearGradient}
           <path class={bem('layer')} style={this.layerStyle} d={this.path} />
-          <path
-            d={this.path}
-            class={bem('hover')}
-            style={this.hoverStyle}
-            stroke={this.gradient ? `url(#${this.uid})` : this.color}
-          />
+          <path d={this.path} class={bem('hover')} style={this.hoverStyle} />
         </svg>
         {this.slots() ||
           (this.text && <div class={bem('text')}>{this.text}</div>)}
diff --git a/src/circle/test/__snapshots__/demo.spec.js.snap b/src/circle/test/__snapshots__/demo.spec.js.snap
index 58fc6e132..1aea0cd47 100644
--- a/src/circle/test/__snapshots__/demo.spec.js.snap
+++ b/src/circle/test/__snapshots__/demo.spec.js.snap
@@ -19,7 +19,7 @@ exports[`renders demo correctly 1`] = `
     </div>
     <div class="van-circle"><svg viewBox="0 0 1040 1040">
         <path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__layer" style="fill: none; stroke: #ebedf0; stroke-width: 40px;"></path>
-        <path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" stroke="#ee0a24" class="van-circle__hover" style="stroke: #ee0a24; stroke-width: 41px; stroke-dasharray: 2198px 3140px;"></path>
+        <path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__hover" style="stroke: #ee0a24; stroke-width: 41px; stroke-dasharray: 2198px 3140px;"></path>
       </svg>
       <div class="van-circle__text">颜色定制</div>
     </div>
@@ -31,19 +31,19 @@ exports[`renders demo correctly 1`] = `
           </linearGradient>
         </defs>
         <path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__layer" style="fill: none; stroke: undefined; stroke-width: 40px;"></path>
-        <path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" stroke="url(#van-circle-gradient-3)" class="van-circle__hover" style="stroke: [object Object]; stroke-width: 41px; stroke-dasharray: 2198px 3140px;"></path>
+        <path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__hover" style="stroke: url(#van-circle-gradient-3); stroke-width: 41px; stroke-dasharray: 2198px 3140px;"></path>
       </svg>
       <div class="van-circle__text">渐变色</div>
     </div>
     <div class="van-circle" style="margin-top: 15px;"><svg viewBox="0 0 1040 1040">
         <path d="M 520 520 m 0, -500 a 500, 500 0 1, 0 0, 1000 a 500, 500 0 1, 0 0, -1000" class="van-circle__layer" style="fill: none; stroke: undefined; stroke-width: 40px;"></path>
-        <path d="M 520 520 m 0, -500 a 500, 500 0 1, 0 0, 1000 a 500, 500 0 1, 0 0, -1000" stroke="#07c160" class="van-circle__hover" style="stroke: #07c160; stroke-width: 41px; stroke-dasharray: 2198px 3140px;"></path>
+        <path d="M 520 520 m 0, -500 a 500, 500 0 1, 0 0, 1000 a 500, 500 0 1, 0 0, -1000" class="van-circle__hover" style="stroke: #07c160; stroke-width: 41px; stroke-dasharray: 2198px 3140px;"></path>
       </svg>
       <div class="van-circle__text">逆时针</div>
     </div>
     <div class="van-circle" style="width: 120px; height: 120px; margin-top: 15px;"><svg viewBox="0 0 1040 1040">
         <path d="M 520 520 m 0, -500 a 500, 500 0 1, 0 0, 1000 a 500, 500 0 1, 0 0, -1000" class="van-circle__layer" style="fill: none; stroke: undefined; stroke-width: 40px;"></path>
-        <path d="M 520 520 m 0, -500 a 500, 500 0 1, 0 0, 1000 a 500, 500 0 1, 0 0, -1000" stroke="#7232dd" class="van-circle__hover" style="stroke: #7232dd; stroke-width: 41px; stroke-dasharray: 2198px 3140px;"></path>
+        <path d="M 520 520 m 0, -500 a 500, 500 0 1, 0 0, 1000 a 500, 500 0 1, 0 0, -1000" class="van-circle__hover" style="stroke: #7232dd; stroke-width: 41px; stroke-dasharray: 2198px 3140px;"></path>
       </svg>
       <div class="van-circle__text">大小定制</div>
     </div>