diff --git a/src/circle/index.tsx b/src/circle/index.tsx
index 2f3e029a5..af8d24388 100644
--- a/src/circle/index.tsx
+++ b/src/circle/index.tsx
@@ -96,8 +96,10 @@ export default createComponent({
 
     const renderHover = () => {
       const PERIMETER = 3140;
-      const { color, strokeWidth, currentRate, strokeLinecap } = props;
+      const { strokeWidth, currentRate, strokeLinecap } = props;
+      let { color } = props;
       const offset = (PERIMETER * currentRate) / 100;
+      color = isObject(color) ? `url(#${id})` : color;
       const style = {
         stroke: `${color}`,
         strokeWidth: `${+strokeWidth + 1}px`,
@@ -110,7 +112,7 @@ export default createComponent({
           d={path.value}
           style={style}
           class={bem('hover')}
-          stroke={isObject(color) ? `url(#${id})` : color}
+          stroke={color}
         />
       );
     };
diff --git a/src/circle/test/__snapshots__/demo.spec.js.snap b/src/circle/test/__snapshots__/demo.spec.js.snap
index 57b9c1726..53cc1ccea 100644
--- a/src/circle/test/__snapshots__/demo.spec.js.snap
+++ b/src/circle/test/__snapshots__/demo.spec.js.snap
@@ -81,7 +81,7 @@ exports[`should render demo and match snapshot 1`] = `
       >
       </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"
-            style="stroke: [object Object]; stroke-width: 41px; stroke-dasharray: 2198px 3140px;"
+            style="stroke: url(#van-circle-3); stroke-width: 41px; stroke-dasharray: 2198px 3140px;"
             class="van-circle__hover"
             stroke="url(#van-circle-3)"
       >