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

Question

我想提请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);" /> 

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。这里有一些想法：

1. 您的标记保持不变。

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

3. <defs>部分中有一个<line>部分，该部分充当将在大圆周围布置的棒的模板。设置只有y1属性将设置x1，y1和x2到0默认值。的y1值，然而，确定了棒的长度。该行必须由圆弧半径（97.5）翻译才能正确定位。

4. 当把一切在一起的组的内部，棒由<use>元件引用从<defs>部的线模板包括在内。然后，您可以通过指定transform="rotate(..)"设定所需的旋转每个indiviual棒。

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