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

Question

我试图从圆心开始画一个角度(60度)的6支装

通过手动设置坐标可以实现图片中的内容.是否可以使用角度和长度来绘制这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

这是我为你制作的一个演示.

使用的主要功能是在圆上找到一个点,如下所示:

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

Answer 2

在我思考了一段时间之后，我想出了一个根本不需要任何脚本的解决方案，因此仅支持 SVG。这其中涉及到一些想法：

1. 您的标记保持不变。

2. 为了简化问题，元素的放置参考了左上角的 SVG 原点。然后，所有可见元素将被分组为一个，<g>该元素将被转换为所需的偏移量，从而一次性转换所有元素。这使您无需在每次计算坐标时考虑圆心的位置。

3. <line>该部分中有一个<defs>作为木棍的模板，这些木棍将围绕大圆圈排列。仅设置该y1属性就会设置x1和y1为x2它们的默认值0。y1然而，的值决定了棒的长度。该线必须平移圆半径 (97.5) 才能正确定位。

4. 将组内的所有内容放在一起时，引用<use>该部分中的行模板的元素将包含这些棒<defs>。然后，您可以通过指定 为每个单独的摇杆设置所需的旋转transform="rotate(..)"。

#markerCircle > circle {
    stroke: none;
    fill: #ef4b22;
}

#stick {
    stroke: #ef4b22;
    stroke-width: 2px;
    fill: none;
    marker-start: url(#markerCircle);
}

circle {
    stroke: #ef4b22;
    stroke-width: 10px;
    fill: none;
}

<svg width="400" height="400" 
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  
    <defs>
        <marker id="markerCircle" markerwidth="13" markerheight="13" refx="5" refy="7" orient="auto">
            <circle cx="7" cy="7" r="3"/>
        </marker>
        <line id="stick" y1="50" transform="translate(0,97.5)"/>
    </defs>
    
    <g transform="translate(150,152.5)">
        <circle r="97.5" />
        <use xlink:href="#stick" transform="rotate(0)" />
        <use xlink:href="#stick" transform="rotate(60)" />
        <use xlink:href="#stick" transform="rotate(120)" />
        <use xlink:href="#stick" transform="rotate(180)" />
        <use xlink:href="#stick" transform="rotate(240)" />
        <use xlink:href="#stick" transform="rotate(300)" />
    </g>
  
</svg>

请注意，为了简洁并强调重要方面，我尽可能地剥离了 SVG：

1. 样式已移至外部 CSS。

2. 因为许多属性都有默认值，以防被省略，所以我删除了它们。

通过将丢失的信息放回 SVG 中，可以轻松恢复任何这些更改，而不会损害整体外观。如果您希望将所有内容包含在独立的 SVG 中而不需要外部 CSS，您也可以将样式放回：

<svg width="400" height="400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

    <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>
        <line id="stick" y1="50" transform="translate(0,97.5)" style="stroke:#ef4b22; stroke-width:2px; fill:none;marker-start: url(#markerCircle);"/>
    </defs>

    <g transform="translate(150,152.5)">
        <circle r="97.5" style="stroke:#ef4b22; stroke-width:10px; fill:none;" />
        <use xlink:href="#stick" transform="rotate(0)" />
        <use xlink:href="#stick" transform="rotate(60)" />
        <use xlink:href="#stick" transform="rotate(120)" />
        <use xlink:href="#stick" transform="rotate(180)" />
        <use xlink:href="#stick" transform="rotate(240)" />
        <use xlink:href="#stick" transform="rotate(300)" />
    </g>

</svg>