svg element : 기본 모양들

developer.mozilla.org/ko/docs/Web/SVG/Element

SVG element reference - SVG | MDN

 

기본 모양들

 

<circle>

아래 외에 storke 등의 스타일링을 추가해줄 수 있습니다.

그래프에서 scatter chart 그릴 때 종종 사용합니다.

<svg>
  <circle r={반지름의 길이} cx=={x 좌표} cy={y 좌표}></circle>
</svg>

 

<rect>

막대 그래프 그릴 때 사용합니다.

x, y는 절대적인 위치를 의미하고, width, height는 속성명 그대로입니다.

rx : The horizontal corner radius of the rect. Defaults to ry if it is specified.

ry : The vertical corner radius of the rect. Defaults to rx if it is specified.

<svg viewBox="0 0 220 100" xmlns="http://www.w3.org/2000/svg">
  <!-- Simple rectangle -->
  <rect width="100" height="100" />

  <!-- Rounded corner rectangle -->
  <rect x="120" width="100" height="100" rx="15" />
</svg>

 

 

<path>

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <path d="M 10,30
           A 20,20 0,0,1 50,30
           A 20,20 0,0,1 90,30
           Q 90,60 50,90
           Q 10,60 10,30 z"/>
</svg>

 

path를 잘 쓰는 방법은 d 속성을 얼마나 잘 이해하느냐에 달려있다.

🚨 주의) document에서 x,y 기준점은 현실세계의 그래프와 달리, 브라우저 좌측 상단 모서리지점입니다. y값은 좌측모서리로부터의 거리이므로, y값을 수치 그대로 넣게되면 우리 현실세계에서의 그래프와는 상하가 반대인 그래프 모양이 그려지게 되죠. 네 그래서 캔버스 높이에서 데이터값을 빼서 y값을 만듭니다.

필자 추가) D3에서는 Scale을 통해 이 값을 변환해주는 방식이 더 많이 사용됩니다.

출처: ttps://velog.io/@bangina/D3.js-React.js-Hooks-%ED%95%A8%EA%BB%98-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0-2.-%EA%B3%A1%EC%84%A0-%EA%B7%B8%EB%9E%98%ED%94%84-%EB%A7%8C%EB%93%A4%EA%B8%B0

 

developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d

• MoveTo: M, m
• LineTo: L, l, H, h, V, v
• Cubic Bézier Curve: C, c, S, s
• Quadratic Bézier Curve: Q, q, T, t
• Elliptical Arc Curve: A, a
• ClosePath: Z, z

 

Move

M : Move the current point to the coordinate x,y.

즉, 절대적인 x, y 좌표로 이동시킨다.

 

m : Move the current point by shifting the last known position of the path by dx along the x-axis and by dy along the y-axis.

즉, Pn = {xo + dx, yo + dy} 즉, 현재 경로에서 x, y 좌표만큼 이동시킨다.

 

Line : line, horizontal, vertical

 

L : Draw a line from the current point to the end point specified by x,y.

l : Draw a line from the current point to the end point

H : Draw a horizontal line from the current point to the end point

h : Draw a horizontal line from the current point to the end point

V : Draw a vertical line from the current point to the end point

v : Draw a vertical line from the current point to the end point

 

좀 예시를 들어서 구체적으로 확인해봅시다.

<path d="M 10,10 l 80,80 v -80 h -40" stroke="blue" fill="none"></path>

10, 10 까지 이동(시작)

현재 좌표에서 80, 80만큼 이동 (웹 상에서는 반전되어 보인다)

현재 좌표에서 수직 -80만큼 이동

현재 좌표에서 수평 -40만큼 이동