SVG의 창 위치는 일반적으로 CSS에 의해 지정되며 크기는 SVG 요소의 속성 너비와 높이에 의해 설정됩니다. 그러나 SVG가 임베디드 객체 (예 : 객체 요소 또는 기타 SVG 요소)에 저장되고 SVG를 포함하는 문서는 CSS 또는 XSL과 형식화되며 이러한 주변 객체의 CSS 또는 기타 지정된 크기 값은 이미 창 크기를 계산할 수 있습니다.
여기서는 Windows, Window Coderinate Systems 및 사용자 좌표 시스템의 개념을 구별해야합니다.
창 : 길이와 너비가 제한된 웹 페이지의 보이는 직사각형 영역을 나타냅니다.이 영역은 일반적으로 주변 물체의 크기와 관련이 있습니다. 창 좌표계 : 기본적으로 원점, x 축 및 Y 축이있는 좌표계; 그리고 그것은 양방향으로 무한히 확장됩니다. 기본적으로 원점은 창의 왼쪽 상단에 있고 x 축은 오른쪽으로 수평이며 y 축은 수직으로 아래쪽으로됩니다. 이 좌표계의 포인트는 변형 될 수 있습니다. 사용자 좌표 시스템 : 기본적으로 원점, X 축 및 Y 축이있는 좌표계; 그리고 그것은 양방향으로 무한히 확장됩니다. 기본적으로 원점은 창의 왼쪽 상단에 있고 x 축은 오른쪽으로 수평이며 y 축은 수직으로 아래쪽으로됩니다. 이 좌표계의 포인트는 변형 될 수 있습니다.기본적으로 창 좌표계와 사용자 좌표계는 겹치지 만, 창 좌표계는 창을 생성하는 요소에 속한다는 점에 유의해야합니다. 창 좌표계가 결정되면 전체 창의 좌표 톤이 결정됩니다. 그러나 사용자 좌표 시스템은 각 그래픽 요소에 속합니다. 그래픽에 좌표 변환이있는 한 새로운 사용자 좌표 시스템이 생성됩니다. 이 요소의 모든 좌표 및 치수는이 새로운 사용자 좌표 시스템을 사용합니다.
간단히 말해서 : 창 좌표계는 창에있는 모든 요소의 초기 좌표 프로파일을 설명하고 사용자 좌표 시스템은 각 요소의 좌표 프로파일을 설명합니다. 기본적으로 모든 요소는 창 좌표계와 일치하는 기본 사용자 좌표 시스템을 사용합니다.
공간 변환을 조정하십시오 번역, 스케일링 및 회전 함수를 통해 구현되는 캔버스 사용자 좌표의 변환을 검토합시다. 각 변환은 현재 사용자 좌표 시스템의 개념 인 변환이 다시 수행되지 않는 한 나중에 그려진 그림에 대해 작동합니다. 캔버스에는 하나의 사용자 좌표 시스템이 있습니다.SVG에서는 상황이 완전히 다릅니다. 벡터 그래프 요소로서 SVG 자체는 본질적으로 사용자 좌표 시스템으로 간주 될 수 있습니다. SVG의 좌표 공간 모두 변환 될 수 있습니다 : 창 공간 변환 및 사용자 공간 변환. Window Space 변환은 관련 요소의 속성 뷰 박스에 의해 제어됩니다 (이 요소는 새 창을 만듭니다). 사용자 공간 변환은 그래프 요소의 변환 속성에 의해 제어됩니다. 창 공간 변환은 해당 전체 창에 적용되며 사용자 공간 변환은 현재 요소 및 하위 요소에 적용됩니다.
창 변형 - 뷰 박스 속성창을 생성 할 수있는 모든 요소 (다음 섹션 참조)와 마커, 패턴 및 뷰 요소는 뷰 박스 속성이 있습니다.
ViewBox 속성 값의 형식은 (x0, y0, u_width, u_height)이며 각 값은 쉼표 또는 공간으로 분리됩니다. 그들은 창에 표시되는 영역을 공동으로 결정합니다. 창의 왼쪽 상단 모서리의 좌표는 (x0, y0)으로 설정되고 창의 너비는 u_width로 설정되며 높이는 u_height입니다. 이 변환은 전체 창에 작동합니다.
여기서 혼동하지 마십시오 : 창의 크기와 위치는 창을 생성하는 요소와 주변 요소 (예 : 가장 바깥 쪽 SVG 요소에 의해 생성 된 창은 CSS, 너비 및 높이에 의해 결정됨)에 의해 결정되었습니다. 여기서 뷰 박스는 실제로이 결정된 영역을 설정하여 창 좌표계의 어느 부분을 표시하는 것입니다. ViewBox 설정에는 실제로 두 가지 변환이 포함됩니다 : 줌 및 창 공간의 번역.변환의 계산도 매우 간단합니다. SVG의 너비와 길이가 너비, 높이로 설정되고 뷰 박스 설정이 (x0, y0, u_width, u_height)라고 가정 할 때 가장 바깥 쪽 SVG 요소의 뷰 창을 예로 들어보십시오. 그 다음 그림의 너비와 높이는 각각 너비/u_width, 높이/u_height입니다. 창의 왼쪽 상단 모서리의 좌표는 (x0, y0)으로 설정됩니다.
다음 코드로 그린 결과의 차이점을 경험하십시오.
<svg viewbox = "0 0 200 200">
<rect x = "0"y = "0"fill = "red" />
<rect x = "0"y = "0"fill = "green" />
</svg>
위의 예에서 그린 그림에서 녹색과 빨간색 사각형을 볼 수 있습니다. 이 경우 창 좌표계의 점은 여전히 창의 점에 해당하며 이는 기본값이기도합니다.
<svg viewbox = "0 0 100 100">
<rect x = "0"y = "0"fill = "red" />
<rect x = "0"y = "0"fill = "green" />
</svg>
위의 예에서 그린 그림에서 녹색 사각형 만 볼 수 있으며 녹색 사각형은 200*200 픽셀로 화면에 표시됩니다. 현재 좌표 지점은 더 이상 하나의 하나가 아니며 그림이 확대됩니다.
<svg viewbox = "0 0 400 400">
<rect x = "0"y = "0"fill = "red" />
<rect x = "0"y = "0"fill = "green" />
</svg>
위의 예에서 그린 그림에서, 창 좌표계의 단위가 줄어들므로 두 사각형이 줄어 듭니다.
일상적인 작업에서 우리가 종종 완료 해야하는 한 가지 작업은 일련의 그래픽을 스케일링하여 부모 컨테이너에 적응하는 것입니다. ViewBox 속성을 설정하여이를 달성 할 수 있습니다.
새 창을 만들 수있는 요소 언제든지 창문을 둥지로 만들 수 있습니다. 새 창을 만들 때 새 창 좌표계와 사용자 좌표 시스템이 만들어지고 물론 클리핑 경로를 포함한 새로운 새가 생성됩니다. 다음은 새 창을 만들 수있는 요소 목록입니다. SVG : SVG는 둥지를 지원합니다. 기호 : 사용 요소에 의해 인스턴스화 될 때 새 창을 만듭니다. 이미지 : SVG 요소를 참조 할 때 새 창이 작성됩니다. 외국어 : 내부의 객체를 렌더링하기 위해 새 창을 만듭니다. 스케일-예비 전공 속성을 유지하십시오 때로는 특히 ViewBox를 사용할 때 그래픽이 양방향으로 동일한 비율로 스케일링하는 대신 전체 창을 차지할 것으로 예상됩니다. 때로는 그림의 두 방향이 고정 된 규모로 조정되기를 바랍니다. 이를 제어 할 목적을 달성하려면 속성 Preserveaspectratio를 사용하십시오.이 속성은 새 창과 이미지, 마커, 패턴 및 뷰 요소를 만들 수있는 모든 요소입니다. 또한, 예비 전자 속성은 뷰 박스가 요소로 설정된 후에 만 작동합니다. 뷰 박스가 설정되지 않으면 Preserveaspectratio 속성이 무시됩니다.
속성의 구문은 다음과 같습니다. preserveaspectratio = [defer] <align> [<averorlice>]
3 개의 매개 변수는 공백으로 분리해야합니다.
연기 : 선택적 매개 변수, 이미지 요소에만 유효합니다. 이미지 요소의 PreserveAspectratio 속성 값이 연기로 시작되면 이미지 요소가 참조 된 이미지의 스케일링 비율을 사용 함을 의미합니다. 참조 된 이미지에 스케일링 비율이 없으면 연기가 무시됩니다. 다른 모든 요소는이 문자열을 무시합니다. 정렬 :이 매개 변수는 통합 스케일링의 정렬을 결정하고 다음 값을 취할 수 있습니다.없음 - 강요되지 않은 통합 스케일링으로 그래픽이 전체 뷰포트를 완전히 채울 수 있습니다.
XMINYMIN- 강제 균일 스케일링 및 뷰 박스에서 <Min-X> 및 <min-y>을 뷰포트의 최소 x 및 y 값으로 정렬합니다.
XMIDYMIN- Unified 스케일링을 강제로하고 ViveWbox의 X 방향으로 중간 점을 뷰포트의 X 방향의 중간 점에 맞 춥니 다. 요컨대, X 방향의 중간 점은 정렬되고 y 방향은 위와 동일합니다.
XMAXYMIN- 힘 균일 스케일링 및 뷰 박스에서 설정된 <min -x> + <width>를 뷰포트의 최대 x 값으로 정렬합니다.
xminymid, xmidymid, xmaxymid, xminymax, xmidymax, xmaxymax와 유사한 다른 유형의 값이 있습니다. 이 조합의 의미는 위의 상황과 유사합니다.
MeetorsLice : 선택적 매개 변수, 다음 값을 사용할 수 있습니다.충족 - 기본값, 모든 그래픽이 뷰포트에 표시되도록 그래픽을 균일하게 스케일링하십시오.
슬라이스 - 그래픽의 통합 스케일링으로 그래픽이 뷰포트를 채우고 과잉이 잘려집니다.
다음 그림은 다양한 충전의 효과를 설명합니다.
사용자 좌표 시스템의 변환 - 변환 속성 이 유형의 변환은 요소의 변환 속성을 설정하여 지정됩니다. 여기서 변환 속성에 의해 설정된 요소의 변환은 요소와 자식 요소에만 영향을 미치며 다른 요소와 관련이 없으며 다른 요소에 영향을 미치지 않는다는 점에 유의해야합니다. 번역 - 번역 변환 변환은 관련 좌표 값을 지정된 위치로 변환하고 변환은 두 축에서 번역 된 양으로 전달되어야합니다. See example:<rect x = "0"y = "0"transform = "translate (30,40)" />
이 예제는 사각형을 그립니다. 시작점 (0,0)을 (30,40)으로 변환합니다. (x, y)의 좌표 값을 직접 설정할 수 있지만 번역 변환을 사용하여 구현하는 것이 매우 편리합니다. 이 변환의 두 번째 매개 변수는 생략 될 수 있으며 0이 처리되면 기본값이 처리됩니다.
회전 - 회전 요소를 회전시키는 것도 매우 일반적인 작업입니다. 회전 변환을 사용하여 구현할 수 있으며,이를 통해 회전 각도 매개 변수를 통과해야합니다. 예를 참조하십시오.<rect x = "20"y = "20"transform = "rotate (45)" />
이 예제는 45도 회전 사각형을 보여줍니다. 몇 가지 메모 :
1. 여기서 변환은 각도 값을 매개 변수로 취합니다.
2. 회전은 x 축에 대한 회전을 의미합니다.
3. 사용자 좌표 시스템의 원점 (0,0) 주변에서 회전이 확장됩니다.
기울기 - 왜곡 변환은 또한 X 축을 따라 기울어 질 수있는 기울기 변환을지지합니다 (왼쪽 및 왼쪽 및 왼쪽 및 직각은 오른쪽으로 기울어 지거나 실제로 y 축에 기울어 지거나 y 축을 따라 (위와 아래로, 하향 각도로 기울어지면서 실제로 x 축으로 기울어집니다). 이 변환은 각도 매개 변수를 통과해야하므로 경사각을 결정합니다. 다음 예를 참조하십시오.<SVG>
<rect x = "0"y = "0"fill = "green" />
<circle cx = "15"cy = "15"r = "15"fill = "red" />
<circle cx = "15"cy = "15"r = "15"fill = "옐로우"변환 = "skewx (45)" />
<rect x = "30"y = "30" />
<rect x = "30"y = "30"transform = "skewx (45)" />
<rect x = "30"y = "30"transform = "skewy (45)" />
</svg>
결과부터 다른 경사 변환 후 같은 크기의 사각형의 위치와 모양을 직접 볼 수 있습니다. 새 좌표계 (30,30)가 이미 다른 위치에 있기 때문에 사각형의 시작 위치가 변경되었습니다.
규모 규모 스케일링 객체는 스케일링 변환에 의해 완료되며, 이는 2 개의 매개 변수를 받아 각각 수평 및 수직에서 스케일링 비율을 지정합니다. 두 번째 매개 변수가 생략되면 첫 번째 매개 변수와 동일한 값이 가져옵니다. 다음 예를 참조하십시오.<SVG>
<text x = "20"y = "20"font-size = "20"> abc (scale) </text>
<text x = "50"y = "50"font-size = "20"transform = "scale (1.5)"> abc (scale) </text>
</svg>
변환 매트릭스 - 매트릭스 그래픽을 연구 한 사람은 모든 변환이 실제로 매트릭스로 표시된다는 것을 알고 있으므로 위의 변환은 실제로 3*3 행렬로 표시 될 수 있습니다.에이스
BDF
0 0 1
6 개의 값 만 사용되므로 [ABCDEF]로서 약칭됩니다. 매트릭스 (a, b, c, d, e, f)를 할당하여 해당 변환을 구현하도록 변환합니다. 변환은 좌표와 길이를 새로운 차원으로 변환합니다. 상기 변환의 해당 행렬은 다음과 같습니다.
번역 변환 [1 0 1 0 TX TY] :
1 0 TX
0 1 Ty
0 0 1
스케일링 변환 [SX 0 0 SY 0 0] :
SX 0 0
0 SY 0
0 0 1
회전 변형 [cos (a) sin (a) -신 (a) cos (a) 0 0] :
cos (a) -신 (A) 0
죄 (a) cos (a) 0
00 1
x 축을 따른 경사 [1 0 tan (a) 1 0 0] :
1 황갈색 (a) 0
0 1 0
0 0 1
y 축을 따른 경사 [1 tan (a) 0 1 0 0] :
11 0
황갈색 (a) 1 0
00 1
본질을 바꾸십시오 전에 캔버스를 요약했을 때, 우리는 모든 종류의 변환이 사용자 좌표 시스템에 적용된다는 것을 알았습니다. SVG에서 모든 변환은 두 개의 좌표 시스템 (본질적으로 사용자 좌표 시스템)입니다. 컨테이너 객체 또는 그래프 객체에 변환 속성을 지정하거나 SVG, Symber, Marker, Pattern, View에 Viewbox 속성을 지정하면 SVG는 현재 사용자 좌표 시스템에 따라 변환하여 새로운 사용자 좌표 시스템을 생성하고 현재 객체 및 하위 목록에 작용합니다. 이 객체에 지정된 좌표와 길이는 더 이상 1 : 1이 말초 좌표계에 해당하지 않지만 변형 될 때 새 사용자 좌표 시스템으로 변환됩니다. 이 새로운 사용자 좌표 시스템은 현재 요소와 자식 요소에만 작용합니다. 변환 체인 변환 속성은 여러 변환을 설정하는 것을 지원합니다. 이러한 변형은 중간의 공간으로 분리되어 속성에 함께 배치됩니다. 실행 효과는 이러한 변환을 순서대로 독립적으로 수행하는 것과 동일합니다.<g tr선
<!-그래픽 요소는 여기로 이동합니다->
</g>
위의 효과는 다음과 같습니다.
<g transform = "번역 (-10, -20)">
<g transform = "scale (2)">
<g transform = "rotate (45)">
<g transform = "번역 (5,10)">
<!-그래픽 요소는 여기로 이동합니다->
</g>
</g>
</g>
</g>
단위 마지막으로 유닛에 대해 이야기 해 봅시다. 모든 좌표와 길이에는 단위가 있거나없는 장비가 장착 될 수 있습니다. 단위없이장치가없는 값은 현재 사용자 좌표 시스템의 단위 값인 사용자 장치를 갖는 것으로 간주됩니다.
유닛을 가져 오는 상황SVG의 관련 단위는 CSS와 동일합니다 : EM, EX, PX, PT, PC, CM, MM 및 IN %도 길이에 사용될 수 있습니다.
상대 측정 단위 : EM 및 EX는 또한 현재 글꼴의 글꼴 크기 및 X- 높이에 비해 CSS와 유사합니다.
절대 측정 단위 : 하나의 PX는 사용자 단위와 같다. 즉, 5px는 5와 동일하다. 그러나 PX가 픽셀에 해당하는지 여부는 일부 변환이 있는지 여부에 달려있다.
다른 단위는 기본적으로 px : 1pt = 1.25px, 1pc = 15px, 1mm = 3.543307px, 1cm = 35.43307px, 1in = 90px입니다.
가장 바깥 쪽 SVG 요소의 너비와 높이가 단위 (즉, 사용자 단위)를 지정하지 않으면 이러한 값은 PX로 간주됩니다.
이 기사는 이야기하기가 매우 어렵습니다. 실제로, 그래픽 요소의 좌표와 길이는 창 좌표계의 이중 변환 및 사용자 좌표 시스템 변환 후 새로운 사용자 좌표 시스템의 좌표와 길이를 나타냅니다. 실제 참조 : 스크립트 인덱스 : http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85).aspx개발 센터 : https://developer.mozilla.org/en/svg
인기있는 참조 : http://www.chinasvg.com/
공식 문서 : http://www.w3.org/tr/svg11/