javascript - 예제 - SVG 마커-길이와 각도를 설정할 수 있습니까?




svg란 (2)

나는 각도 (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);" />

여기 제가 당신을 위해 만든 데모 입니다.

사용 된 주요 기능은 아래와 같이 원에 점을 찾는 것입니다.

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

잠시 동안 내 머리를 감싸고 난 후에는 스크립팅을 전혀 필요로하지 않는 솔루션을 생각해 냈습니다. 따라서 SVG 전용입니다. 여기에 관련된 몇 가지 아이디어가 있습니다.

  1. 마커는 변경되지 않습니다.

  2. 문제를 단순화하기 위해 요소는 왼쪽 상단에있는 SVG의 원점을 참조하여 배치됩니다. 가시적 인 모든 요소는 하나의 <g> 로 그룹화되어 원하는 오프셋으로 변환되어 모든 요소를 ​​한 번에 변환합니다. 이렇게하면 좌표 계산을 할 때마다 원의 중심 위치를 고려하지 않아도됩니다.

  3. <defs> 섹션에는 큰 원 주위에 배열 될 스틱의 템플리트 역할을하는 <line> 이 있습니다. y1 속성 만 설정하면 x1 , y1x2 가 기본값 0 으로 설정됩니다. 그러나 y1 의 값은 스틱의 길이 를 결정합니다. 이 선은 올바르게 배치되기 위해 원 반경 (97.5)으로 변환되어야합니다.

  4. 그룹 안에 모든 것을 모으는 경우 <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를 제거했습니다.

  1. 스타일이 외부 CSS로 옮겨졌습니다.

  2. 많은 속성은 생략 된 경우를 대비하여 기본값을 갖기 때문에 제거해야합니다.

이러한 변경 사항은 전체 모양을 위태롭게하지 않으면 서 누락 된 정보를 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