如何增加旋转SVG圆环的描边粗细？（实现更粗线条的方法）

你的这个SVG动画用的是填充（fill）的闭合路径，不是描边（stroke）实现的圆环，所以没法直接通过调整stroke-width来改粗细。下面给你两种可行的解决方案：

方案一：修改现有路径的半径差（快速适配） #

原路径是通过两个不同半径的圆弧组合出来的（a8和a11分别对应两个圆弧的半径），增大这两个半径的差值，就能让圆环变粗。比如把小半径从8改成7，大半径从11改成12，差值从3变成5，圆环就会明显变粗：

svg {
  background: beige;
  zoom: 4;
}

<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24">
   <path fill="black" d="M9.87,19.94a7,7,0,0,1-5.66-8.57A6.77,6.77,0,0,1,10.4,4.6a7,7,0,0,1,8.28,5.71A1.54,1.54,0,0,0,20.22,12h.13a1.37,1.37,0,0,0,1.38-1.54,12,12,0,1,0-13.85,13.45A1.54,1.54,0,0,0,12,21.34h0A1.47,1.47,0,0,0,9.87,19.94Z">
   <animateTransform attributeName="transform" dur="2.25s" repeatCount="indefinite" type="rotate" values="0 12 12;360 12 12"/>
   </path>
</svg>

方案二：改用描边实现（更灵活可控） #

如果想以后随时调整粗细，建议把填充路径改成描边的圆环，直接用stroke-width控制粗细，动画逻辑也更清晰：

svg {
  background: beige;
  zoom: 4;
}

<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24">
  <!-- 描边圆环，stroke-width控制粗细 -->
  <circle cx="12" cy="12" r="9" fill="none" stroke="black" stroke-width="3" 
          stroke-dasharray="56.55" stroke-dashoffset="14.14" />
  <!-- 旋转动画 -->
  <animateTransform attributeName="transform" dur="2.25s" repeatCount="indefinite" 
                    type="rotate" values="0 12 12;360 12 12"/>
</svg>

这里的stroke-width可以直接改成你想要的数值（比如4、5），r是圆环的外半径，需要保证r大于stroke-width的一半，避免描边超出SVG viewBox。

内容的提问来源于stack exchange，提问作者Jake Shaw