diff --git a/src/circle/index.js b/src/circle/index.js
index a61aa7e56..8c470a112 100644
--- a/src/circle/index.js
+++ b/src/circle/index.js
@@ -12,9 +12,9 @@ function format(rate) {
   return Math.min(Math.max(rate, 0), 100);
 }
 
-function getPath(clockwise) {
+function getPath(clockwise, viewBoxSize) {
   const sweepFlag = clockwise ? 1 : 0;
-  return `M 530 530 m 0, -500 a 500, 500 0 1, ${sweepFlag} 0, 1000 a 500, 500 0 1, ${sweepFlag} 0, -1000`;
+  return `M ${viewBoxSize / 2} ${viewBoxSize / 2} m 0, -500 a 500, 500 0 1, ${sweepFlag} 0, 1000 a 500, 500 0 1, ${sweepFlag} 0, -1000`;
 }
 
 export default createComponent({
@@ -72,7 +72,11 @@ export default createComponent({
     },
 
     path() {
-      return getPath(this.clockwise);
+      return getPath(this.clockwise, this.viewBoxSize);
+    },
+
+    viewBoxSize() {
+      return 1000 + this.strokeWidth;
     },
 
     layerStyle() {
@@ -154,7 +158,7 @@ export default createComponent({
   render() {
     return (
       <div class={bem()} style={this.style}>
-        <svg viewBox="0 0 1060 1060">
+        <svg viewBox={`0 0 ${this.viewBoxSize} ${this.viewBoxSize}`}>
           {this.LinearGradient}
           <path class={bem('hover')} style={this.hoverStyle} d={this.path} />
           <path
diff --git a/src/circle/index.less b/src/circle/index.less
index 65d0c9020..8f6ab3248 100644
--- a/src/circle/index.less
+++ b/src/circle/index.less
@@ -14,9 +14,6 @@
   }
 
   &__layer {
-    // should not use transform-origin: center
-    // that will cause incorrect style in android devices
-    transform-origin: 530px 530px;
     fill: none;
     stroke-linecap: round;
   }
diff --git a/src/circle/test/__snapshots__/demo.spec.js.snap b/src/circle/test/__snapshots__/demo.spec.js.snap
index c76bf29ab..912f232d8 100644
--- a/src/circle/test/__snapshots__/demo.spec.js.snap
+++ b/src/circle/test/__snapshots__/demo.spec.js.snap
@@ -3,9 +3,9 @@
 exports[`renders demo correctly 1`] = `
 <div>
   <div>
-    <div class="van-circle" style="width: 100px; height: 100px;"><svg viewBox="0 0 1060 1060">
-        <path d="M 530 530 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__hover" style="fill: none; stroke: #fff; stroke-width: 40px;"></path>
-        <path d="M 530 530 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" stroke="#1989fa" class="van-circle__layer" style="stroke: #1989fa; stroke-width: 41px; stroke-dasharray: 2198px 3140px;"></path>
+    <div class="van-circle" style="width: 100px; height: 100px;"><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__hover" style="fill: none; stroke: #fff; 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="#1989fa" class="van-circle__layer" style="stroke: #1989fa; stroke-width: 41px; stroke-dasharray: 2198px 3140px;"></path>
       </svg>
       <div class="van-circle__text">70%</div>
     </div>
@@ -17,33 +17,33 @@ exports[`renders demo correctly 1`] = `
       </svg>
       <div class="van-circle__text">宽度定制</div>
     </div>
-    <div class="van-circle" style="width: 100px; height: 100px;"><svg viewBox="0 0 1060 1060">
-        <path d="M 530 530 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__hover" style="fill: none; stroke: #ebedf0; stroke-width: 40px;"></path>
-        <path d="M 530 530 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" stroke="#f44" class="van-circle__layer" style="stroke: #f44; stroke-width: 41px; stroke-dasharray: 2198px 3140px;"></path>
+    <div class="van-circle" style="width: 100px; height: 100px;"><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__hover" 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="#f44" class="van-circle__layer" style="stroke: #f44; stroke-width: 41px; stroke-dasharray: 2198px 3140px;"></path>
       </svg>
       <div class="van-circle__text">颜色定制</div>
     </div>
-    <div class="van-circle" style="width: 100px; height: 100px;"><svg viewBox="0 0 1060 1060">
+    <div class="van-circle" style="width: 100px; height: 100px;"><svg viewBox="0 0 1040 1040">
         <defs>
           <linearGradient id="van-circle-gradient-3" x1="100%" y1="0%" x2="0%" y2="0%">
             <stop offset="0%" stop-color="#ffd01e"></stop>
             <stop offset="100%" stop-color="#ee0a24"></stop>
           </linearGradient>
         </defs>
-        <path d="M 530 530 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__hover" style="fill: none; stroke: #fff; stroke-width: 40px;"></path>
-        <path d="M 530 530 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__layer" 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="fill: none; stroke: #fff; 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__layer" style="stroke: [object Object]; stroke-width: 41px; stroke-dasharray: 2198px 3140px;"></path>
       </svg>
       <div class="van-circle__text">渐变色</div>
     </div>
-    <div class="van-circle" style="width: 100px; height: 100px; margin-top: 15px;"><svg viewBox="0 0 1060 1060">
-        <path d="M 530 530 m 0, -500 a 500, 500 0 1, 0 0, 1000 a 500, 500 0 1, 0 0, -1000" class="van-circle__hover" style="fill: none; stroke: #fff; stroke-width: 40px;"></path>
-        <path d="M 530 530 m 0, -500 a 500, 500 0 1, 0 0, 1000 a 500, 500 0 1, 0 0, -1000" stroke="#07c160" class="van-circle__layer" style="stroke: #07c160; stroke-width: 41px; stroke-dasharray: 2198px 3140px;"></path>
+    <div class="van-circle" style="width: 100px; height: 100px; 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__hover" style="fill: none; stroke: #fff; 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__layer" 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 1060 1060">
-        <path d="M 530 530 m 0, -500 a 500, 500 0 1, 0 0, 1000 a 500, 500 0 1, 0 0, -1000" class="van-circle__hover" style="fill: none; stroke: #fff; stroke-width: 40px;"></path>
-        <path d="M 530 530 m 0, -500 a 500, 500 0 1, 0 0, 1000 a 500, 500 0 1, 0 0, -1000" stroke="#7232dd" class="van-circle__layer" style="stroke: #7232dd; stroke-width: 41px; stroke-dasharray: 2198px 3140px;"></path>
+    <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__hover" style="fill: none; stroke: #fff; 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__layer" style="stroke: #7232dd; stroke-width: 41px; stroke-dasharray: 2198px 3140px;"></path>
       </svg>
       <div class="van-circle__text">大小定制</div>
     </div>
diff --git a/src/circle/test/__snapshots__/index.spec.js.snap b/src/circle/test/__snapshots__/index.spec.js.snap
index 81802911a..97dbfb718 100644
--- a/src/circle/test/__snapshots__/index.spec.js.snap
+++ b/src/circle/test/__snapshots__/index.spec.js.snap
@@ -1,15 +1,15 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`size prop 1`] = `
-<div class="van-circle" style="width: 100px; height: 100px;"><svg viewBox="0 0 1060 1060">
-    <path d="M 530 530 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__hover" style="fill: none; stroke: #fff; stroke-width: 40px;"></path>
-    <path d="M 530 530 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" stroke="#1989fa" class="van-circle__layer" style="stroke: #1989fa; stroke-width: 41px; stroke-dasharray: 0px 3140px;"></path>
+<div class="van-circle" style="width: 100px; height: 100px;"><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__hover" style="fill: none; stroke: #fff; 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="#1989fa" class="van-circle__layer" style="stroke: #1989fa; stroke-width: 41px; stroke-dasharray: 0px 3140px;"></path>
   </svg></div>
 `;
 
 exports[`speed is 0 1`] = `
-<div class="van-circle" style="width: 100px; height: 100px;"><svg viewBox="0 0 1060 1060">
-    <path d="M 530 530 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__hover" style="fill: none; stroke: #fff; stroke-width: 40px;"></path>
-    <path d="M 530 530 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" stroke="#1989fa" class="van-circle__layer" style="stroke: #1989fa; stroke-width: 41px; stroke-dasharray: 1570px 3140px;"></path>
+<div class="van-circle" style="width: 100px; height: 100px;"><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__hover" style="fill: none; stroke: #fff; 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="#1989fa" class="van-circle__layer" style="stroke: #1989fa; stroke-width: 41px; stroke-dasharray: 1570px 3140px;"></path>
   </svg></div>
 `;