English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
SVG 변환은 SVG 이미지에서 생성된 형상을 움직이거나 확대하고 회전하는 것입니다. 예를 들어, 수직이나 대각선 텍스트를 표시하는 편리한 방법입니다.
이는 간단한 예제입니다:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <rect x="50" y="50" height="110" width="110" style="stroke:#ff0000; fill: #ccccff" transform="translate(30) rotate(45 50 50)" > </rect> <text x="70" y="100" transform="translate(30) rotate(45 50 50)" >oldtoolbag.com</text> </svg>테스트해 보기‹/›
실행 후 이미지 효과:
주의하세요<rect>요소의transform 과 <text>의transform속성을 통해 형상에 적용할 변환을 지정합니다. 이 예제에서는 평행이동과 회전을 적용했습니다. 두 가지 모두 본문의 후반에서 설명할 것입니다.
모든 SVG 형상에 변환을 적용할 수 있습니다. 또한 변환을 적용할 수 있는 요소도 있습니다.<g>
요소에 대해 변환을 적용할 수 있으며, 이를 통해 전체 요소 그룹을 한 번에 효과적으로 변환할 수 있습니다. 그리고 변환을 슬라이드와 패턴에도 적용할 수 있습니다.
SVG는 네 가지 변환 함수를 제공합니다:
translate()
rotate()
scale()
skew()
matrix()
이하의 각 섹션에서는 이러한 함수의 각각에 대해 자세히 설명합니다.
실제로, 변환 함수는 SVG 형상을 자동으로 변환하지 않고, 그 형상의 기본 좌표계를 변환합니다. 따라서 너비가 배수로 표시되더라도 너비20으로 곱하여2의 형상은 논리적으로 여전히20의 너비.
translate()함수를 사용하여 형상을 이동시킵니다. 이를 통해x 과 y 값을 전달해야 합니다.translate()함수. 이는 예제입니다:
translate(50,25)
이 예제에서는 형상을 x축 방향으로 이동시킵니다50단위로 y축 방향으로 이동25단위.
이는 두 위치가 같고 크기가 같은 형상, 이동 여부를 보여주는 예제입니다:
<svg width="500" height="150"> <rect x="20" y="20" width="50" height="50" style="fill: #cc3333"/> <rect x="20" y="20" width="50" height="50" style="fill: #3333cc" transform="translate(75,25)></rect> </svg>테스트해 보기‹/›
실행 후 이미지 효과:
주의하세요. 첫 번째(빨간색) 형상과 비교해 두 번째(파란색) 형상이 x축 방향으로 이동합니다.75단위로 y축 방향으로 이동25단위.
rotate()함수는 점 0,0을 중심으로 회전된 형상. 이는 사각형(외곽선)과 회전된 예제입니다.15도의 등각 사각형(실선):
<svg width="500" height="150"> <rect x="20" y="20" width="40" height="40" style="stroke: #3333cc; fill:none;" ></rect> <rect x="20" y="20" width="40" height="40" style="fill: #3333cc" transform="rotate(15)" ></rect> </svg>테스트해 보기‹/›
실행 후 이미지 효과:
0,0 이외의 다른 점을 회전시키려면, 그 점의 x와 y 좌표를 전달해야 합니다.transform함수. 이 예제는 회전하지 않은 사각형（골격）과 중심을 중심으로 회전한 동일한 사각형을 보여줍니다.15도：
<svg width="500" height="150"> <rect x="20" y="20" width="40" height="40" style="stroke: #3333cc; fill:none;" ></rect> <rect x="20" y="20" width="40" height="40" style="fill: #3333cc" transform="rotate(15, 40, 40)" ></rect> </svg>테스트해 보기‹/›
실행 후 이미지 효과:
모든 회전은 시계 방향으로 회전하며, 각도는 0에서360. 반시계 방향으로 회전하려면 음의 도를 전달해야 합니다.rotate()함수.
scale()함수는 형상을 비례적으로 확대하거나 축소할 수 있습니다.scale()함수는 형상의 크기 및 위치 좌표를 확대할 수 있습니다. 따라서20으로 곱하여2비율로 확대된 너비는20이고 높이는30의 사각형이20,20에서, 너비는40이고 높이는60.
scale()함수는 형상의 선 길이도 확대할 수 있습니다.
이 예제는10,0에서, 너비는20이고 높이는20의 사각형（파란색），또한 비율이 같은 사각형（검은색）의 확대 비율은2：
<svg width="500" height="150"> <rect x="10" y="10" width="20" height="30" style="stroke: #3333cc; fill:none;"></rect> <rect x="10" y="10" width="20" height="30" style="stroke: #000000; fill:none;" transform="scale(2)></rect> </svg>테스트해 보기‹/›
실행 후 이미지 효과:
주의해야 할 것은 사각형의 위치와 크기가 어떻게 확대되는지입니다.
x축과 y축에 따라 다른 요인으로 형상을 확대할 수 있습니다. 이를 위해 scale 함수에 요인을 추가할 수 있습니다.scale()함수는 x-scale과 y-scale 매개변수는 다음과 같습니다：
scale(2,3);
이 예제는 x축에 따라 형상을 확대2배로 y축에 따라 형상을 확대3배. 다음은 예제입니다：
<svg width="500" height="150"> <rect x="10" y="10" width="20" height="30" style="stroke: #3333cc; fill:none;"></rect> <rect x="10" y="10" width="20" height="30" style="stroke: #000000; fill:none;" transform="scale(2,3)></rect> </svg>테스트해 보기‹/›
실행 후 이미지 효과:
주의해야 할 것은 확대된 사각형（검은색）의 선 길이도 어떻게 확대되는지, 그리고 x축과 y축의 확대 비율이 다른 것입니다.
scale()x축이나 y축에 따라-1확대 비율，
이 함수를 거울 함수로 사용할 수 있습니다. 완료된 후, x나 y축 방향으로 형상을 이동（이동）해야 합니다. 그렇지 않으면 거울 형상이 SVG 캔버스 외부에 나타납니다.
다음은 예제입니다：
<svg width="500" height="150"> <path d="M20,20 l20,20 l0,20 l-20,20 Z" style="stroke: #3333cc; fill:none;" /> <path d="M20,20 l20,20 l0,20 l-20,20 Z" style="stroke: #000000; fill:none;" transform="translate(100, 0) scale(-1, 1) " /></svg>테스트해 보기‹/›
x = 100 위치에서 그린 선의 결과 이미지（사각형이 x축 방향으로 이동했기 때문에）100）。
파란색은 원래 형상입니다. 검은색 형상은 이동된 축을 확대한 형상입니다.
skewX()과skewY()함수는 x축과 y축을 기울입니다. 실제로 이 함수는 도로 단위로 지정된 특정 각도에 따라 주어진 축을 기울입니다.
다음은 다른skewX()가치의 사각형의 몇 가지 예제.
<svg width="500" height="150"> <rect x="10" y="10" width="20" height="30" style="stroke: #3333cc; fill:none;" /> <rect x="50" y="10" width="20" height="30" style="stroke: #000000; fill:none;" transform="skewX(10)" /> <rect x="100" y="10" width="20" height="30" style="stroke: #000000; fill:none;" transform="skewX(45)" /> <rect x="150" y="10" width="20" height="30" style="stroke: #000000; fill:none;" transform="skewX(60)" /></svg>테스트해 보기‹/›
실행 후 이미지 효과:
그렇게 보이듯이，skewX()함수는 수직선이 주어진 각도로 회전하는 것처럼 보이게 합니다. 따라서，skewY()함수는 수평선이 주어진 각도로 회전하는 것처럼 보이게 합니다. 다음은 몇 가지 예제입니다：
<svg width="500" height="150"> <rect x="10" y="10" width="20" height="30" style="stroke: #3333cc; fill:none;" /> <rect x="50" y="10" width="20" height="30" style="stroke: #000000; fill:none;" transform="skewY(60)" /> <rect x="100" y="10" width="20" height="30" style="stroke: #000000; fill:none;" transform="skewY(45)" /> <rect x="150" y="10" width="20" height="30" style="stroke: #000000; fill:none;" transform="skewY(10)" /></svg>테스트해 보기‹/›
도 매트릭스로 변환을 표현할 수 있습니다. 매트릭스는 다음과 같습니다：
a c e b d f 0 0 1
전에6의 값이며, 따라서 매트릭스 변환 함수에만 제공할 수 있습니다6의 값. 이는 예제입니다：
transform="matrix(a,b,c,d,e,f)"
기타 변환 함수는 매트릭스로 표현될 수 있습니다. 여기 몇 가지 예제가 있습니다：
Translate 1 0 tx 0 1 ,ty 0 0 1 matrix(1,0,0,1,tx,ty)
Rotate cos(a) -sin(a) 0 sin(a) cos(a) 0 0 0 1 matrix( cos(a), sin(a),-sin(a),cos(a),0,0 )
주의: 이 값cos(a)과sin(a)이 매개변수는 삽입 전에 미리 계산되어야 합니다.a는 회전 각도입니다。
Scale sx 0 0 0 sy 0 0 0 1 matrix(sx,0,0,sy,0,0)
x축을 따라의 기울기 변환은 다음과 같이 쓸 수 있습니다：
Skew 1 tan(a) 0 0 1 0 0 0 1 matrix(1,0,tan(a),1,0,0)
tan(a)값이 삽입됩니다matrix()함수는 삽입 전에 미리 계산되어야 합니다。
y축을 따라의 기울기 변환은 다음과 같이 표현할 수 있습니다：
Skew 1 0 0 tan(a) 1 0 0 0 1 matrix(1,tan(a),0,1,0,0)
이는 간단한 변환 기능을 모방한 SVG 매트릭스 변환 예제입니다：
<svg width="500" height="150"> <rect x="20" y="20" width="50" height="50" style="fill: #cc3333"/> <rect x="20" y="20" width="50" height="50" style="fill: #3333cc" transform="matrix(1,0,0,1,100,20)" /> </svg>테스트해 보기‹/›
실행 후 이미지 효과:
주의하세요, 왼쪽(빨간색) 사각형과 비교하여 오른쪽 사각형(파란색)의 변환 방식을 어떻게 변환되는지 확인하세요.
변환을 조합할 수 있습니다.transform여러 변환 함수를 속성 내에 배치하여 구현할 수 있습니다。
이는 먼저 이동한 후 회전한 사각형의 예입니다. 이 예제는 변환을 적용하기 전과 후(검은색)의 사각형(파란색)을 보여줍니다.
<svg width="500" height="150"> <rect x="50" y="10" width="20" height="30" style="stroke: #3333cc; fill:none;" /> <rect x="50" y="10" width="20" height="30" style="stroke: #000000; fill:none;" transform="translate(50,0) rotate(30)" /> </svg>테스트해 보기‹/›
실행 후 이미지 효과:
변환 순서는 매우 중요합니다.transform속성 내에서 변환 함수의 순서는 그들이 형태에 적용되는 순서입니다。
다음 예제는 먼저 이동한 후 회전하고, 먼저 회전한 후 이동한 형태 간의 차이를 설명합니다：
<svg width="500" height="150"> <rect x="50" y="10" width="20" height="30" style="stroke: #000000; stroke-width: 2px; fill:none;" /> <rect x="50" y="10" width="20" height="30" style="stroke: #3333cc; stroke-width: 2px; fill:none;" transform="translate(100,0) rotate(45)" /> <rect x="50" y="10" width="20" height="30" style="stroke: #cc3333; stroke-width: 2px; fill:none;" transform="rotate(45) translate(100,0)" /> </svg>테스트해 보기‹/›
실행 후 이미지 효과:
검은 직사각형에는 어떤 변환도 적용되지 않았습니다. 먼저 파란 직사각형을 이동한 다음 회전시킵니다. 먼저 빨간 직사각형을 회전한 다음 이동시킵니다.