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>