좌표시스템의 변환(Transformations)

• 2D 기본 변환 : transform="..."
  • 이동(translation) : translate(tx,ty)
  • 회전(rotation) : rotate(a) 시계방향
  • 신축(scaling) : scale(sx,sy)
  • 비틀림(shearing, skew) : skewX(a) 오른쪽, skewY(a) 아래쪽 축의 비틀림 각도

• 예제) 좌표시스템의 이동 

<svg width="300px" height="150px"> <g fill="none" stroke="black" stroke-width="3">   <line x1="0" y1="1.5" x2="300" y2="1.5" />   <line x1="1.5" y1="0" x2="1.5" y2="150" /> </g> <g>   <text x="30" y="30" font-size="18" ... >       ABC (orig coord system)   </text> </g> </svg>
<svg width="300px" height="150px"> <g ... > <line ... /> <line ... /> </g> <g> <text ...>ABC (orig coord system)... </g> <g  transform="translate(50,50)">   <g fill="none" stroke="red" stroke-width="3">      <line x1="0" y1="0" x2="50" y2="0" />      <line x1="0" y1="0" x2="0" y2="50" />   </g>   <text x="30" y="30" font-size="18" ... >       ABC (translated coord system)   </text> </g> </svg>

• 예제) 좌표시스템의 회전, 확대(축소), 비틀림 

<svg width="200px" height="220px"> <g fill="none" stroke="black" ...> <line ...> <line ...> </g> <g transform="translate(50,30)">    <g transform="rotate(30)">       <g fill="none" stroke="red" stroke-width="3" >          <line x1="0" y1="0" x2="50" y2="0" />          <line x1="0" y1="0" x2="0" y2="50" />       </g>       <text x="0" y="0" ... fill="blue" >ABC (rotate)</text>    </g> </g> <g transform="translate(200,40)">    <g transform="scale(0.75)">       <g fill="none" stroke="red" stroke-width="3" >          <line x1="0" y1="0" x2="50" y2="0" />          <line x1="0" y1="0" x2="0" y2="50" />       </g>       <text x="0" y="0" ... fill="blue" >ABC (scale)</text>    </g> </g> </svg>

<svg width="200px" height="220px"> <g fill="none" stroke="black" ... > <line ...> <line ...> </g> <g transform="translate(30,30)">    <g transform="skewX(30)">       <g stroke="red" ...> <line x1="0" ...> <line x1="0" ...> </g>       <text x="0" y="0" ... fill="blue" >ABC (skewX)</text>    </g> </g> <g transform="translate(30,140)">    <g transform="skewY(30)">       <g stroke="red" ...> <line x1="0" ...> <line x1="0" ...> </g>       <text x="0" y="0" ... fill="blue" >ABC (skewY)</text>    </g> </g> </svg>

• 변환의 중첩(Nested transformations) : 합성변환, 조합변환

<svg width="200px" height="250px"> <g fill="none" stroke="black" ... > <line ...> <line ...> </g> <!-- First, a translate --> <g transform="translate(20,90)">    <g stroke="red" ...><line x1="0" y1="0" x2="50" y2="0" />                             <line x1="0" y1="0" x2="0" y2="50" /> </g>    <text x="0" y="0" ... >....Translate(1)</text>    <!-- Second, a rotate -->    <g transform="rotate(-45)">       <g stroke="green" ...><line x1="0" y1="0" x2="50" y2="0"/>                             <line x1="0" y1="0" x2="0" y2="50" /> </g>       <text x="0" y="0" ... >....Rotate(2)</text>       <!-- Third, another translate -->       <g transform="translate(0,120)">          <g stroke="blue" ...><line x1="0" y1="0" x2="50" y2="0"/>                              <line x1="0" y1="0" x2="0" y2="50" /> </g>          <text x="0" y="0" ... >....Translate(3)</text>       </g>    </g> </g> </svg>

변환 행렬 (Transformation Matrix)

• 동차 좌표계(Homogeneous Coordinate System), 동차 행렬식 
  • 2차원 표현에 3x3 행렬 사용
  • 이동,확대,회전,비틀림 등 변환의 표현이 가능
  • 초기 좌표계에서의 좌표값은 행렬 곱하기로 계산
    

• 이동,확대,회전,비틀림 변환 행렬식
  • , , , ,

• 변환 중첩
  • CTM(Current Transformation Matrix)
    

뷰박스(Viewbox)

• 뷰박스 => 뷰포트로 크기변환
• preserveAspectRatio 속성 
  • default : 종횡비 유지 preserveAspectRatio="xMidYMid meet"에 해당
  • preserveAspectRatio="none" 인 경우 뷰포트에 크기 맞춤
  • preserveAspectRatio="... slice" 인 경우 그림을 자른다

<svg width="300px" height="200px"          viewBox="0 0 1500 1000"          preserveAspectRatio="none">   <rect x="0" y="0" width="1500" height="1000"              fill="yellow" stroke="blue" stroke-width="12" />   <path fill="red" d="M 750,100 L 250,900 L 1250,900 z"/>   <text x="100" y="600" font-size="200" ... >        Stretch to fit   </text> </svg> preserveAspectRatio="none"    1) width="150" height="100"  2) width="80" height="100" preserveAspectRatio 없음 (xMidYMid meet) 3) width="150" height="80"  4) width="80" height="80" preserveAspectRatio="xMaxYMax slice"  5) width="150" height="80"  6) width="80" height="80"

• preserveAspectRatio = " x-Y정렬 [meet 또는 slice] " 

새로운 뷰포트의 설정

• 뷰포트 내에 또 다른 뷰포트 설정
  • <svg>, <symbol>, <image>, <foreignObject> 등이 해당

<svg width="250" height="150">    <rect x="2" y="2" width="248" height="148"             fill="none" stroke="red" stroke-width="2"/>    <text x="10" y="30" fill="black" stroke="black"             font-size="20">* Original Viewport *</text>    <!-- a new viewport -->    <svg x="50" y="40" width="150" height="80">       <rect x="2" y="2" width="248" height="148"                fill="yellow" stroke="blue" stroke-width="4"/>       <text x="10" y="30" fill="blue" stroke="blue"                font-size="20">* New Viewport *</text>    </svg> </svg>

단위(Unit)

• 단위 식별자 (Unit Identifier)
  • em, ex, px, pt, pc, cm, mm, in, %(percentage)
  • px(픽셀)는 해당도(dpi)에 따라 실제 크기가 다르다. - 책은 90dpi 인 경우
  • em(엠 크기)는 현재 글자크기, % 는 뷰박스 크기에 비례

• 사용자 정의 단위 (User Unit)
  • 단위 식별자 없는 경우, 뷰박스 크기에 비례
     

<svg width="200px" height="600px" viewBox="0 0 2000 6000"> <rect x="20" y="20" width="1980" height="3980"          fill="none" stroke="blue" stroke-width="20"/> <g fill="blue" stroke="red" font-family="Verdana" font-size="200">   <g transform="translate(400,0)">      <text x="-50" y="300" fill="black" stroke="none">User unit:</text>      <rect x="0" y="400" width="768" height="384" stroke-width="76.8"/>   </g>   <g transform="translate(400,1000)">      <text x="-50" y="300" fill="black" stroke="none">Abs. unit:</text>      <rect x="0" y="400" width="8in" height="4in" stroke-width=".8in"/>   </g>   <g transform="translate(400,2000)">      <text x="-50" y="300" fill="black" stroke="none">Rel. unit:</text>      <rect x="0" y="400" width="4em" height="2em" stroke-...=".4em"/>   </g>   <g transform="translate(400,3000)">      <text x="-50" y="300" fill="black" stroke="none">Percentage:</text>      <rect x="0" y="400" width="40%" height="10%" stroke-width="3%"/>   </g> </g> </svg>