如何正确放大CSS实现的SVG对勾动画至300像素

你调整viewBox没生效是两个必然结果：

• 外层.checkmark的CSS已经硬编码了width: 56px; height: 56px，这个固定尺寸优先级最高，不管怎么改SVG内部属性，外层容器始终被锁在56px大小
• 你直接把viewBox从0 0 52 52改成0 0 300 300，但内部圆形、对勾的坐标还是基于52单位的画布绘制，最终图形只会挤在300画布的左上角，同时描边宽度、动画用的stroke-dasharray参数全是匹配原尺寸的，直接改viewBox会出现动画错位、线条过细的问题。

不需要修改SVG的viewBox和内部路径，只需要调整CSS参数就能完美放大到300px，所有动画效果完全一致：

1. 先把.checkmark的宽高改成目标值300px
2. 按缩放比例同步调整所有和尺寸绑定的参数：原尺寸56px，目标300px，缩放比约为5.36，所有描边宽度、stroke-dasharray、填充动画的阴影扩散值都乘以这个比例即可。

调整后的完整可运行代码：

.checkmark__circle {
  stroke-dasharray: 889;
  stroke-dashoffset: 889;
  stroke-width: 11;
  stroke-miterlimit: 10;
  stroke: #7ac142;
  fill: none;
  animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.checkmark {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  display: block;
  stroke-width: 11;
  stroke: #fff;
  stroke-miterlimit: 10;
  margin: 10% auto;
  box-shadow: inset 0px 0px 0px #7ac142;
  animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
}

.checkmark__check {
  transform-origin: 50% 50%;
  stroke-dasharray: 257;
  stroke-dashoffset: 257;
  animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

@keyframes stroke {
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes scale {
  0%, 100% {
    transform: none;
  }
  50% {
    transform: scale3d(1.1, 1.1, 1);
  }
}
@keyframes fill {
  100% {
    box-shadow: inset 0px 0px 0px 161px #7ac142;
  }
}

<svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
  <circle class="checkmark__circle" cx="26" cy="26" r="25" fill="none"/>
  <path class="checkmark__check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8"/>
</svg>

快速实现的偷懒方案：如果不想逐个调整参数，也可以直接给.checkmark加transform: scale(5.36)，但这种方式会保留元素原56px的占位空间，容易造成周边布局异常，仅适合快速验证效果使用，正式场景优先用上面的参数调整方案。

内容的提问来源于stack exchange，提问作者GTS Joe