Znacznik SVG - czy mogę ustawić długość i kąt?

Question

Próbuję narysować 6 kije zaczynając od środka okręgu z kątem (60 stopni)

Co znajduje się w obraz uzyskuje się poprzez ręczne ustawienie się współrzędne. Czy możliwe jest użycie kąta i długości do narysowania tych 6 patyków? Jeśli to konieczne, chcę korzystać z biblioteki.

<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

Oto demo I made for you.

Główną funkcją stosowany jest, aby znaleźć punkt na okręgu, jak poniżej:

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

Po zawijania moja głowa wokół to na chwilę wpadłem na rozwiązanie, które nie wymaga żadnego włączony w ogóle , a więc tylko SVG. Jest w tym kilka pomysłów:

1. Twój znacznik pozostaje niezmieniony.

2. Aby uprościć sprawę, elementy są umieszczane, odnosząc się do pochodzenia SVG w lewym górnym rogu. Wszystkie widoczne elementy są następnie zgrupowane w jeden <g>, który zostanie przetłumaczony na pożądane przesunięcie, tym samym tranlając wszystkie elementy naraz. To uwalnia cię od uwzględnienia położenia środka koła dla każdego obliczenia współrzędnych.

3. Istnieje <line> w sekcji <defs>, który działa jako szablon dla patyczków, które będą rozmieszczone wokół dużego koła. Ustawienie tylko atrybutu y1 spowoduje ustawienie x1, y1 i x2 na domyślne wartości 0. Jednak wartość y1 określa długość. Ta linia musi zostać przetłumaczona za pomocą promienia okręgu (97,5), który ma być prawidłowo ustawiony.

4. Podczas układania wszystkich elementów wewnątrz grupy, patyki są uwzględniane przez element <use> odwołujący się do szablonu linii z sekcji <defs>. Następnie można ustawić żądany obrót dla każdego pojedynczego sztyftu, podając 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>

Note, które dla zwięzłości i podkreślić ważne aspekty ja pozbawiony SVG dół tak daleko, jak to możliwe:

1. Tytułujący zostało przeniesione do zewnętrzny CSS.

2. Ponieważ wiele atrybutów ma wartości domyślne na wypadek, gdyby zostały pominięte, pozbyłem się ich.

Każda z tych zmian może zostać łatwo przywrócona poprzez umieszczenie brakujących informacji w SVG bez zagrożenia dla ogólnego wyglądu.Jeśli wolisz mieć wszystko zawarte w autonomicznej wersji SVG bez zewnętrznego CSS, możesz równie dobrze włożyć stylizację:

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