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の起点を参照して配置されます。すべての目に見える要素は、1つの<g>にグループ化され、目的のオフセットに変換され、すべての要素を一度に翻訳します。これにより、座標計算のたびに円の中心の位置を考慮することがなくなります。

3. <defs>には<line>があり、大きな円の周りに配置されるスティックのテンプレートとして機能します。 y1属性のみを設定すると、x1,y1、およびx2がデフォルト値の0に設定されます。しかしながら、y1の値は、スティックのの長さを決定します。この線は、円の半径（97.5）で正しく配置するために翻訳する必要があります。

4. グループのすべてをまとめて入れると、<defs>セクションのラインテンプレートを参照する<use>要素によってスティックが含まれます。 transform="rotate(..)"を指定することにより、個々のスティックごとに所望のローテーションを設定することができます。

   1. スタイリングがに移動されました：簡潔と私は可能な限りSVGを削っ重要な側面を強調するためにことを

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

   注意、外部CSS。

5. 多くの属性は省略された場合にデフォルト値を持つため、削除します。

これらの変更は、欠落している情報を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>