如何更改SVG圆的大小

Question

我想从此处调整第一个SVG圆圈的大小，所以我制作了第二个SVG圆圈，但是动画存在问题，动画不一样。

HTML：

<div class="loader">
    <svg class="circular">
        <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="8" stroke-miterlimit="10" />
    </svg>
</div>


<div style="margin-top: 50px;" class="loader">
    <svg class="circular">
        <circle class="path" cx="50" cy="50" r="44" fill="none" stroke-width="8" stroke-miterlimit="10" />
    </svg>
</div>

CSS：

body, svg, circle {
    margin: 0px !important;
    padding: 0px !important;
}
.loader {
    position: relative;
    margin: 0px auto;
    padding: 0px;
    width: 100px;
    height: 100px;
    zoom: 1;
    background-color: grey;
}
.circular {
    -webkit-animation: rotate 3s linear infinite;
    animation: rotate 3s linear infinite;
    height: 100px;
    position: relative;
    width: 100px;
}
.path {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
    -webkit-animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
    animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
    stroke-linecap: round;
}
@-webkit-keyframes rotate {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes rotate {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@-webkit-keyframes dash {
    0% {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -35;
    }
    100% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -124;
    }
}
@keyframes dash {
    0% {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -35;
    }
    100% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -124;
    }
}
@-webkit-keyframes color {
    100%, 0% {
        stroke: #d62d20;
    }
    40% {
        stroke: #0057e7;
    }
    66% {
        stroke: #008744;
    }
    80%, 90% {
        stroke: #ffa700;
    }
}
@keyframes color {
    100%, 0% {
        stroke: #d62d20;
    }
    40% {
        stroke: #0057e7;
    }
    66% {
        stroke: #008744;
    }
    80%, 90% {
        stroke: #ffa700;
    }
}

如何正确调整大小？

Answer 1

元素的stroke-dasharray属性circle确定笔划破折号的长度和两个破折号之间的间隔，而元素的属性确定stroke-dashoffset笔划破折号的起始偏移量。在@keyframes规则内，这些属性将被修改，从而最终产生动画效果。当圆的半径（从而改变圆周）改变时，这些属性（在内设置keyframes）也必须与半径成比例地修改。

由于设置取决于圆的半径，因此我认为您不能@keyframe为两个圆保留相同的动画（）设置。在任何时候，它们中只有一个可以正常工作。

在下面的代码段中，我完成了使较大的圆圈生效所需的更改。

body,
svg,
circle {
  margin: 0px !important;
  padding: 0px !important;
}
.loader {
  position: relative;
  margin: 0px auto;
  padding: 0px;
  width: 100px;
  height: 100px;
  zoom: 1;
  background-color: grey;
}
.circular {
  -webkit-animation: rotate 3s linear infinite;
  animation: rotate 3s linear infinite;
  height: 100px;
  position: relative;
  width: 100px;
}
.path {
  stroke-dasharray: 1, 440;
  stroke-dashoffset: 0;
  -webkit-animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
  animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
  stroke-linecap: round;
}
@-webkit-keyframes rotate {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotate {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-webkit-keyframes dash {
  0% {
    stroke-dasharray: 1, 440;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 89, 440;
    stroke-dashoffset: -77;
  }
  100% {
    stroke-dasharray: 89, 440;
    stroke-dashoffset: -272;
  }
}
@keyframes dash {
  0% {
    stroke-dasharray: 1, 440;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 89, 440;
    stroke-dashoffset: -77;
  }
  100% {
    stroke-dasharray: 89, 440;
    stroke-dashoffset: -272;
  }
}
@-webkit-keyframes color {
  100%, 0% {
    stroke: #d62d20;
  }
  40% {
    stroke: #0057e7;
  }
  66% {
    stroke: #008744;
  }
  80%,
  90% {
    stroke: #ffa700;
  }
}
@keyframes color {
  100%, 0% {
    stroke: #d62d20;
  }
  40% {
    stroke: #0057e7;
  }
  66% {
    stroke: #008744;
  }
  80%,
  90% {
    stroke: #ffa700;
  }
}

<div style="margin-top: 50px;" class="loader">
  <svg class="circular">
    <circle class="path" cx="50" cy="50" r="44" fill="none" stroke-width="8" stroke-miterlimit="10" />
  </svg>
</div>

另外，如果您希望同时@keyframe对两个圆使用相同的动画（）设置，则可以考虑使用a transform: scale来创建更大的圆，而不是手动修改圆的半径。（但是，正如您所看到的，输出与修改半径并不完全相同，因此我不推荐这样做）。

body,
svg,
circle {
  margin: 0px !important;
  padding: 0px !important;
}
.loader {
  position: relative;
  margin: 0px auto;
  padding: 0px;
  width: 100px;
  height: 100px;
  zoom: 1;
  background-color: grey;
}
.circular {
  -webkit-animation: rotate 3s linear infinite;
  animation: rotate 3s linear infinite;
  height: 100px;
  position: relative;
  width: 100px;
}
.path {
  stroke-dasharray: 1, 200;
  stroke-dashoffset: 0;
  -webkit-animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
  animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
  stroke-linecap: round;
}
@-webkit-keyframes rotate {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotate {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-webkit-keyframes dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35;
  }
  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -124;
  }
}
@keyframes dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35;
  }
  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -124;
  }
}
@-webkit-keyframes color {
  100%, 0% {
    stroke: #d62d20;
  }
  40% {
    stroke: #0057e7;
  }
  66% {
    stroke: #008744;
  }
  80%,
  90% {
    stroke: #ffa700;
  }
}
@keyframes color {
  100%, 0% {
    stroke: #d62d20;
  }
  40% {
    stroke: #0057e7;
  }
  66% {
    stroke: #008744;
  }
  80%,
  90% {
    stroke: #ffa700;
  }
}
.loader2 {
  transform: scale(2.2);
}

<div class="loader">
  <svg class="circular">
    <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="8" stroke-miterlimit="10" />
  </svg>
</div>


<div style="margin-top: 100px;" class="loader loader2">
  <svg class="circular">
    <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="8" stroke-miterlimit="10" />
  </svg>
</div>