본문으로 건너뛰기

그룹화와 변환

4. 그룹화와 변환​

SVG 그래픽을 더욱 효율적으로 관리하고 조작하기 위해서는 그룹화와 변환을 이해하는 것이 중요합니다. 이 섹션에서는 SVG에서 제공하는 그룹화 요소와 다양한 변환 속성에 대해 자세히 알아보겠습니다.

4.1 그룹 (Group) 요소​

<g> 태그의 활용​

<g> 태그는 SVG에서 여러 요소를 그룹화하여 하나의 단위로 묶는 데 사용됩니다. 그룹화를 통해 여러 요소에 공통된 속성이나 변환을 적용할 수 있으며, 그래픽을 구조적으로 관리하기 쉽게 만듭니다.

  • 주요 속성

    • transform: 그룹 전체에 변환을 적용할 수 있습니다.
    • opacity: 그룹 전체의 투명도를 설정할 수 있습니다.
    • class, id: 그룹에 CSS 클래스를 지정하거나, JavaScript를 통해 접근할 수 있는 식별자를 부여할 수 있습니다.

  • 예제

    <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
      <g transform="translate(50,50)" fill="none" stroke="black">
        <circle cx="0" cy="0" r="40" />
        <rect x="-20" y="-20" width="40" height="40" />
      </g>
    </svg>

그룹에 스타일 및 변환 적용​

그룹화된 요소는 공통의 스타일이나 변환을 쉽게 적용할 수 있습니다. 이는 그래픽의 일관성을 유지하고, 코드의 재사용성을 높이는 데 도움이 됩니다.

공통 스타일 적용​
  • 그룹에 fill, stroke 등의 스타일을 지정하면, 그룹 내의 모든 요소에 해당 스타일이 적용됩니다.

공통 변환 적용​

  • 그룹에 변환을 적용하면, 그룹 내의 모든 요소가 그 변환의 영향을 받습니다. 예를 들어, 회전, 이동, 스케일링 등을 그룹 전체에 한 번에 적용할 수 있습니다.

    예제: 공통 스타일과 변환 적용

<svg width="300" height="200" xmlns="http://www.w3.org/2000/svg">
  <g fill="blue" stroke="red" stroke-width="2" transform="rotate(45 150 100)">
    <circle cx="150" cy="100" r="50" />
    <rect x="100" y="50" width="100" height="100" />
  </g>
</svg>

4.2 변환 (Transform) 속성​

SVG에서 변환은 그래픽 요소의 위치, 회전, 크기 등을 변경하는 데 사용됩니다. transform 속성을 통해 다양한 변환을 적용할 수 있으며, 단일 요소나 그룹에 적용할 수 있습니다.

  • 주요 변환 기능
    • 이동 (translate)
    • 회전 (rotate)
    • 스케일 (scale)
    • 기울이기 (skew)
    • 복합 변환 (multiple transformations)

이동 (Translate)​

translate 변환은 요소를 지정된 거리만큼 x, y 방향으로 이동시킵니다.

  • 예제
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <rect
    x="10"
    y="10"
    width="50"
    height="50"
    fill="green"
    transform="translate(100, 50)"
  />
</svg>

회전 (Rotate)​

rotate 변환은 요소를 지정된 각도만큼 회전시킵니다. 회전의 중심점을 지정할 수도 있습니다.

  • 예제
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <rect
    x="50"
    y="50"
    width="100"
    height="50"
    fill="blue"
    transform="rotate(30 100 75)"
  />
</svg>

스케일 (Scale)​

scale 변환은 요소의 크기를 조절합니다. x축과 y축 각각에 대해 독립적으로 스케일링할 수 있습니다.

  • 예제
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" fill="red" transform="scale(1.5, 0.5)" />
</svg>

기울이기 (Skew)​

skew 변환은 요소를 x축 또는 y축 방향으로 기울입니다. 기울임의 각도를 지정할 수 있습니다.

  • 예제
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <rect
    x="50"
    y="50"
    width="100"
    height="50"
    fill="purple"
    transform="skewX(30)"
  />
</svg>

복합 변환 (Multiple Transformations)​

  • 예제
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <rect
    x="50"
    y="50"
    width="50"
    height="50"
    fill="orange"
    transform="translate(50, 50) rotate(45) scale(1.5)"
  />
</svg>
  • 직사각형을 먼저 (50, 50) 위치로 이동시키고, 45도 회전한 다음, 1.5배 스케일링하여 최종 위치와 크기를 결정합니다.
  • 변환은 왼쪽에서 오른쪽 순서대로 적용됩니다.