Svg 旋转圆并将圆弧定位在其上，使其具有开始角和结束角

您好，有没有办法用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所示的起始和结束位置

---

请帮我设计：-）

试试这个，我用了

rect

和

circle

而不是

path

svg{
背景：#223D50；
}

检查

谢谢Akshay，但是你能告诉我这是如何动态工作的吗？比如，随着角度的变化将指向精确的度数。例如，在我的附加图像中，角度50和180指向该图像的确切角度。请建议我。@VinothKumar 332角是通过将矩形旋转-28度（360-28=332）创建的红色部分是圆的36.111%（130*100/360）@Akshya，谢谢你的回复，有没有办法将文本50和180放置在与图中相同的位置？即使圆弧的角度移动，它也应该显示相应的位置。@VinothKumar角度如何移动，如单击类型或其他？在页面加载上，值将通过服务器端的AngularJS放置