主页 / coding / 问题 / 78942582
Accepted
Jake Shaw
Asked: 2024-09-03 11:29:33 +0800 CST

如何增加旋转圆圈 SVG 的描边高度（如何使其更粗）

  • 772

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

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="M10.72,19.9a8,8,0,0,1-6.5-9.79A7.77,7.77,0,0,1,10.4,4.16a8,8,0,0,1,9.49,6.52A1.54,1.54,0,0,0,21.38,12h.13a1.37,1.37,0,0,0,1.38-1.54,11,11,0,1,0-12.7,12.39A1.54,1.54,0,0,0,12,21.34h0A1.47,1.47,0,0,0,10.72,19.9Z">
   <animateTransform attributeName="transform" dur="2.25s" repeatCount="indefinite" type="rotate" values="0 12 12;360 12 12"/>
   </path>
</svg>

svg

1 个回答

  1. Best Answer

    为了增加旋转的 SVG 圆圈的厚度，需要修改 SVG 中的 stroke 和 stroke-width 属性：

    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" stroke="blue" stroke-width="2" d="M10.72,19.9a8,8,0,0,1-6.5-9.79A7.77,7.77,0,0,1,10.4,4.16a8,8,0,0,1,9.49,6.52A1.54,1.54,0,0,0,21.38,12h.13a1.37,1.37,0,0,0,1.38-1.54,11,11,0,1,0-12.7,12.39A1.54,1.54,0,0,0,12,21.34h0A1.47,1.47,0,0,0,10.72,19.9Z">
    <animateTransform attributeName="transform" dur="2.25s" repeatCount="indefinite" type="rotate" values="0 12 12;360 12 12"/>
  </path>
</svg>

    • 0

相关问题