Question

我正试图从圆心开始画一个角度（60度）的6支装

Desired ouput

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

Answer 2

在我的脑袋缠绕了一段时间之后，我想出了一个根本不需要任何脚本的解决方案，因此只能使用SVG。这有一些想法：

您的标记保持不变。
为了简化问题，参考左上角的SVG原点放置元素。然后将所有可见元素分组为一个<g>，将其转换为所需的偏移量，从而一次性转换所有元素。这使您无需考虑每个坐标计算中圆心的位置。
<line>部分中有一个<defs>，可作为围绕大圆圈排列的木棒的模板。仅设置y1属性会将x1，y1和x2设置为其默认值0。但是，y1的值决定了棒的长度。该线必须通过圆半径（97.5）平移才能正确定位。
将所有内容放在组内时，引用<defs>部分中的行模板的<use>元素包含了这些内容。然后，您可以通过指定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：

样式已移至外部CSS。
因为许多属性在省略的情况下都有默认值，所以我摆脱了它们。

通过将丢失的信息放回SVG而不会危及整体外观，可以轻松恢复任何这些更改。如果您希望在没有外部CSS的情况下将所有内容都包含在独立SVG中，您可以将样式重新放入：

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

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

2 个答案: