使用开始和结束角度旋转圆并在其上定位圆弧答案

【问题标题】：Rotate circle and position arc over it with start and end angle使用开始和结束角度旋转圆并在其上定位圆弧
【发布时间】：2015-08-23 18:13:45
【问题描述】：

你好，有没有什么方法可以用 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 所示的开始和结束位置。

请帮我设计:-)

【问题讨论】：

标签： svg geometry

【解决方案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>

【讨论】：

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