https://codepen.io/yeynii/pen/dyKZJLJ

svg 하위에서 사용한 태그들

<defs>

추후 사용될 그래픽 객체를 저장해두는 태그

• <pattern> : 달 표면 그림을 패턴으로 정의

• <filter> : 달에 입체효과를 주기 위한 inset-shadow를 정의

  내부 태그 중 상수 조절이 필요한 부분

  • <feGaussianBlur stdDeviation="9" /> → stdDeviation : blur의 분포 (숫자가 클수록 넓게 퍼짐),
  • <feFlood floodColor="rgb(0, 0, 0, 0.7)" result="color" /> → floodColor : 그림자의 색

<g>

svg elements를 그룹화하는 태그

<circle>

원을 그리는 태그

<path>

선의 path를 정의하는 태그

• M x y

  좌표 x, y로 이동한다

• A rx ry x축 회전각 큰 호 플래그 쓸기 방향 플래그 x y

  현재 좌표와 (x, y) 두 점을 지나면서 x축 반지름rx, y축 반지름ry, x축 회전각만큼 기울어진 타원호를 그리며 이동한다

  

  ⇒ 4가지 경우의 수가 생기는데, 이걸 특정해주는게 두개의 플래그인 셈

  큰 호 플래그 - 0: 중심각이 180도 미만(작은 호) 1: 중심각이 180도 이상(큰 호)

  쓸기 방향 플래그 - 0: 음각(반시계방향), 1: 양각(시계방향)

ex)

M 50 1 A 49,49 0 0,1 49,99 A 48.02,49 0 1,0 50,1

M 50 1 : (50,1) 좌표로 이동한다

A 49,49 0 0,1 49,99 : (50,1) (49,99) 를 지나면서 양각으로 반지름이 49인 작은 호를 그린다.

A 48.02,49 0 1,0 50,1 (49,99) (50,1) 를 지나면서 음각으로 반지름이 49인 큰 호를 그린다.