javascript - SVG 标记 - 我可以设置长度和 Angular 吗？

Question

我正在尝试从圆心开始以一定 Angular (60 度)绘制 6 根棍子

图中是手动设置坐标实现的。是否可以用 Angular 和长度来画这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);" />

Answer 1

这是一个 demo I made for you .

主要使用的函数是在圆上找一点，如下:

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 };
}