如何增加旋转圆SVG的笔划高度（如何使其更粗）

Question

我正在尝试增加这个旋转 SVG 圆圈的厚度。不知道是冲程高度还是什么。我已尽我所能，但似乎站点中的 SVG 编辑器不包含增加笔划厚度或笔划高度的选项。任何想法将不胜感激！

<svg xmlns="http://www.w3.org/2000/svg" width="4em" height="1em" viewBox="0 0 24 24"><path fill="black" d="M12,4a8,8,0,0,1,7.89,6.7A1.53,1.53,0,0,0,21.38,12h0a1.5,1.5,0,,11,11,0,0,0-21.72,0A1.5,1.5,0,0,0,2.62,12h0a1.53,1.53,0,0,0,1.49-1.3A8,8,0,0,1,12,4Z"><animateTransform attributeName="transform" dur="2.25s" repeatCount="indefinite" type="rotate" values="0 12 12;360 12 12"/></path></svg>

Answer 1

要增加 SVG 圆圈中描边的粗细，您需要使用

stroke-width

属性。此属性定义圆形、路径和线条等形状周围的描边粗细。

以下示例展示了如何增加 SVG 圆的笔划粗细：

<svg xmlns="http://www.w3.org/2000/svg" width="4em" height="4em" viewBox="0 0 24 24">
  <circle cx="12" cy="12" r="10" stroke="black" stroke-width="2" fill="none"/>
</svg>

说明：

• stroke-width="2"

  ：这会将笔画的粗细设置为 2 个单位。您可以增加此值以使笔划变粗。

• stroke="black"

  ：设置描边的颜色。您可以将其更改为您喜欢的任何颜色。

• fill="none"

  ：这可以确保圆圈不被任何颜色填充。

您可以调整

stroke-width

值以获得所需的厚度。如果您使用的 SVG 编辑器不支持直接调整笔划宽度，您可以在 SVG 代码中手动添加

stroke-width

属性，如上所示。