Javascript SVG标记-我可以设置长度和角度吗？

我试着从圆心开始画6根有角度（60度）的棍子

图片中的内容是通过手动设置坐标来实现的。是否可以使用角度和长度来绘制这6根杆？如果有必要，我愿意使用图书馆

<defs>
  <marker id="markerCircle" markerwidth="13" markerheight="13" refx="5" refy="7" orient="auto">
  <circle cx="7" cy="7" r="3" style="stroke: none; fill:#ef4b22;" />
  </marker>
</defs>

        <path d="M150,5 L150,55"
              style="stroke: #ef4b22; stroke-width: 2px; fill: none;
               marker-start: url(#markerCircle);" />
        <path d="M25,60 L75,95"
              style="stroke: #ef4b22; stroke-width: 2px; fill: none;
               marker-start: url(#markerCircle);" />
        <path d="M20,225 L68,200"
              style="stroke: #ef4b22; stroke-width: 2px; fill: none;
               marker-start: url(#markerCircle);" />
        <path d="M275,60 L225,95"
              style="stroke: #ef4b22; stroke-width: 2px; fill: none;
               marker-start: url(#markerCircle);" />
        <path d="M280,225 L220,200"
              style="stroke: #ef4b22; stroke-width: 2px; fill: none;
               marker-start: url(#markerCircle);" />
        <path d="M150,300 L150,250"
              style="stroke: #ef4b22; stroke-width: 2px; fill: none;
               marker-start: url(#markerCircle);" />

这里有一个例子

使用的主要功能是查找圆上的点，如下所示：

function findPoint(cx, cy, rad, cornerGrad){
  var cornerRad = cornerGrad * Math.PI / 180;
  var nx = Math.cos(cornerRad)*rad + cx;
  var ny = Math.sin(cornerRad)*rad + cy;
  return { x: nx, y: ny };
}

---

经过一段时间的思考，我想出了一个解决方案，它根本不需要任何脚本，因此只需要SVG。这其中涉及到一些想法：

您的标记保持不变

为了简化问题，元素被放置在左上角，参考SVG的原点。然后将所有可见元素分组为一个

，并将其转换为所需的偏移量，从而一次转换所有元素。这样，您就不必在每次计算坐标时都考虑圆心的位置

在

部分中有一个

，用作围绕大圆排列的杆的模板。仅设置

y1

属性将

x1

、

y1

和

x2

设置为默认值

0

。但是，

y1

的值决定了杆的长度。该线必须平移圆半径（97.5）才能正确定位

当将组内的所有内容放在一起时，参考

部分中的行模板的元素将包括这些杆。然后，通过指定

transform=“rotate（..”

，您可以为每个独立的杆设置所需的旋转

#标记圆>圆{
中风：无；
填写：#ef4b22；
}
#棍子{
冲程：#ef4b22；
笔画宽度：2px；
填充：无；
标记开始：url（#标记圆圈）；
}
圈{
冲程：#ef4b22；
笔划宽度：10px；
填充：无；
}