Path

Path란

 

• <path> element는 SVG 기본 도형 라이브러리에서 가장 강력한 엘리먼트이다. 
• 선과 곡선, 호 등 다양한 형태를 그릴 수 있다.
• 패스의 모양은 d 속성 하나로 정의된다.
  ("d" 속성은 여러 개의 명령어와 그 파라미터들로 이루어진다.)
• 각각 명령은 특정 알파벳으로 시작한다.
  - "Move To" 명령을 사용하며, 이 명령은 알파벳 M으로 호출
    (SVG 처리기가 이 문자를 읽게 되면 다른 위치로 이동하라는 명령으로 이해하게 된다.)
• 모든 명령어는 2가지 변형이 존재하는데, 알파벳이 대문자일 경우, 뒤따르는 좌표는 페이지의 절대 좌표를 참조하며, 소문자 알파벳일 경우 마지막 위치에 대한 상대적 좌표로 참조된다.

 

Line(선) 명령어

 

두 점 사이에 선을 그리는 역할을 한다. 

• M / m (moveTo)
  - 시작점 지정
  - 두 개의 파라미터로 x와 y 좌표를 받는다.
  - 그리기 커서가 이미 페이지의 다른 곳에 있었더라도 두 점 사이에 점이 그려지지는 않는다.
• L / l (lineTo)
  - 직선 그리기
  - x, y라는 두 개의 파라미터를 받아서 현재 위치에서 새 위치로 선을 긋는다.
  
• H / h (horizontal lineto)
  - 수평선 긋기
  - 현재 점에서 수평선을 그린다.
  - 한 좌표축으로만 이동하므로 하나의 파라미터만을 받는다.
• V / v (vertical lineto)
  - 수직선 긋기
  - 현재 점에서 수직선을 그린다.
  - 한 좌표축으로만 이동하므로 하나의 파라미터만을 받는다.
  
• Z / z (closepath)
  - 시작점까지 연결, 패스 닫기
  - 대문자와 소문자 사이의 차이는 없다.
  

  <svg class="view03" width="100" height="100">
      <path d="M 20,10 L 80,10 L 90,80 H 10 Z"></path>
      <style>
          .view03 path{
              fill:none;
              stroke:rgb(201, 141, 74);
          }
      </style>
  </svg>

 

곡선 (Curve) 명령어

 

• C / c (curveto)
  - 곡선 긋기
  - 3차 베지어 곡선은 선을 잇는 두 점에 하나씩 제어점을 가지고 있다.
    (3차 베지에 곡선을 그리려면 총 세 개의 좌표가 필요하다.)
  - 마지막으로 지정된 좌표 (x, y)는 곡선의 끝점이다.
  - 나머지 두 개는 제어점이며, 첫 번째 제어점은 (x1, y1), 두 번째 제어점은 (x2, y2)이다.
  - 제어점은 기본적으로 시작점과 끝점에서 곡선의 방향을 기술한다.
  

  C x1 y1, x2 y2, x y / c dx1 dy1, dx2 dy2, dx dy

• S / s (smooth curveto)
  - 곡선 이어 긋기
  - 한 선의 제어점을 다른 선의 제어점과 반대 방향으로 그어서 완만한 경사를 만드는 경우 사용한다.
  - 다른 S나 C 명령어 다음에 올 경우 첫 번째 제어점은 이전에 사용했던 제어점을 뒤집은 것으로 간주된다.
  - S 명령어가 다른 S나 C 명령어 다음에 오지 않을 경우에는 현재 커서 위치가 첫 번째 제어점으로 사용된다.
  

   S x2 y2, x y / s dx2 dy2, dx dy

   
•   Q / q (quadratic Bézier curve)
  - 2차원 베지어 곡선 긋기
  - 하나의 제어점이 시작점과 끝점의 방향을 모두 결정한다. 
  - 매개변수로 제어점과 곡선의 끝점 2개를 받는다.
  

  Q x1 y1, x y / q dx1 dy1, dx dy

  
  
• T / t (smooth quadratic Bézier curveto)
  - 2차원 베지어 곡선 이어 긋기
  - 이전에 사용한 제어점으로부터 새로운 제어점을 만들어낸다.
    (처음에 제어점 하나만을 기술하면 끝점만을 계속 이어서 꽤 복잡한 도형을 만들 수 있다.)
  - QT가 앞에 오면 뒤에 오는 T는 이전에 사용한 제어점으로부터 곡선이 자동 생성 조절점이 생략된다/
  - T는 이전의 명령이 Q 또는 T가 아닌 경우는 제어점이 현재점과 일치한다고 가정하에 직선이 된다.
  

  T x y / t dx dy

  
  

  <svg class="view01" width="100" height="100">
      <!-- <path d="M 0,16 
                  C 16,32 16,0 32,16 
                  S 48,0 64,16 
                  Z">
      </path> -->
      <!-- <path d="M 0,16 
                  S 16,0 32,16
                  S 48,0 64,16 
                  Z">
      </path> -->
      <path d="M 0,16 
                  Q 16,0 32,16
                  T 64,16 
                  Z">
      </path>
      <style>
          .view01 path{
              stroke:#000;
          }
      </style>
  </svg>

 

원호

 

• A / a (elliptical Arc)
  - 타원이나 호 그리기
    (호는 원이나 타원의 일부분을 말한다.)
  - x, y축 반지름이 주어졌을 때, 두 점을 연결할 수 있는 타원은 2개가 있다.
  - 각각의 타원에서 두 점을 잇는 경로 또한 2개씩 있기 때문에 어떤 상황에서든 네 종류의 호를 그릴 수 있다.
  - A 명령어는 x축, y축 반지름을 매개변수로 받으며 세 번째 매개변수는 호의 회전각을 기술한다.
  - 첫 번째 인수는 큰 호 플래그(large-arc-flag)이며, 중심각이 180도 이상이 될지를 결정한다.
    (호가 주어진 원의 어느 방향을 따라 돌지를 결정한다.)
  - 두 번째 인수는 쓸기 방향 플래그(sweep-flag)이며, 호가 이동해야 할 각이 음인지 양인지를 결정한다.
    (이 각은 본질적으로 두 개의 원 중 어느 쪽을 따를지를 결정한다.)
  - 마지막 두 개의 매개변수는 호가 끝나는 x와 y 좌표를 지정한다.
  

   A rx ry x축-회전각 큰-호-플래그 쓸기-방향-플래그 x y
   a rx ry x축-회전각 큰-호-플래그 쓸기-방향-플래그 dx dy