使用起始和结束角度旋转圆圈并在其上方定位圆弧

Question

您有什么方法可以使用SVG或任何其他方式设计下图？

请找到头部

的圆圈的SVG代码

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 width="110px" height="110px" viewBox="0 0 110 110" enable-background="new 0 0 110 110" xml:space="preserve">
<g>
<title>Sample</title>
<g>
    <path d="M60.391,23.712V0H48.975v23.571c-21.802,2.619-37.87,20.953-37.87,43.041c0,23.995,19.536,43.391,43.411,43.391
        c23.855,0,43.392-19.396,43.392-43.391C97.907,44.736,81.202,26.543,60.391,23.712z M22.501,66.682
        c0-17.628,14.369-31.998,32.015-31.998c17.626,0,31.995,14.37,31.995,31.998c0,17.625-14.299,32.065-31.995,32.065
        C36.8,98.747,22.501,84.307,22.501,66.682z"/>
</g>

头 根据示例332°中的头部角度，圆圈应旋转

红弧 根据弧的起点和终点位置，它应从那里开始，显示起始位置和结束位置，如图50和180所示。

请帮我设计： - ）

Answer 1

尝试使用rect和circle代替path

svg{
    background:#223D50;
}

<svg width="100%" height="100%" viewbox="0 0 100 100">
    <rect x="40" y="30" width="3" height="12" fill="grey" transform="rotate(-28 42 50)"/>
    <circle cx="42" cy="53" r="10" stroke-width="3" stroke="grey" fill="none"/>
    <circle cx="42" cy="53" r="18" fill="transparent" stroke-width="5" stroke="red" stroke-dasharray="36.11111% 100%" stroke-dashoffset="0" transform="rotate(-30 42, 53)"/>
    <text x="36" y="55" fill="white" font-size="5">Check</text>
  </svg>