확장 가능한 벡터 그래픽 회전 기능
이미지를 회전하면 해당 이미지가 표시되는 각도가 변경됩니다. 간단한 그래픽의 경우 간단하거나 지루한 이미지 일 수있는 것에 다양성과 흥미를 더할 수 있습니다. 모든 변환과 마찬가지로 rotate는 애니메이션의 일부로 또는 정적 그래픽으로 작동합니다. SVG에서 회전하는 방법을 배우 거나 Scalable Vector Graphics 를 사용하면 모양의 디자인에 다른 각도를 요청할 수 있습니다. SVG 회전 기능은 이미지를 어느 방향으로나 돌릴 수 있습니다.
회전 정보
회전 기능은 모두 그래픽의 각도에 관한 것입니다. SVG 이미지 를 디자인 할 때는 전통적인 각도로 앉아있는 정적 모델을 만들 것입니다. 예를 들어, 정사각형은 X 축을 따라 두 개의 변을 가지며 Y 축을 따라 두 개의 변을 갖습니다. 회전 시키면 같은 사각형을 가져 와서 다이아몬드 모양으로 만들 수 있습니다.
그 하나의 효과만으로도 매우 일반적인 상자 (웹 사이트에서는 매우 일반적 임)에서 다이아몬드로 넘어갔습니다. 다이아몬드는 일반적인 것이 아니며 디자인에 재미있는 시각적 다양성을 추가하지 않았습니다. 회전은 또한 SVG의 애니메이션 용량의 일부입니다. 서클은 표시되는 동안 계속 회전 할 수 있습니다. 이 모션은 방문객의 관심을 끌고 디자인에서 주요 영역 또는 요소에 대한 경험을 집중할 수 있도록 도와줍니다.
회전은 이미지에 점 하나가 고정 된 상태라는 이론에 기반합니다. 푸시 핀이있는 판지에 종이 조각이 붙어 있다고 상상해보십시오. 핀 위치는 고정 된 지점입니다. 가장자리를 잡고 시계 방향 또는 반 시계 방향으로 회전하여 용지를 돌리면 푸시 핀이 움직이지 않지만 직사각형은 여전히 각도를 변경합니다. 용지는 회전하지만 핀의 고정 점은 변경되지 않습니다. 이는 회전 기능이 작동하는 것과 매우 유사합니다.
구문 회전
rotate를 사용하면 회전 각도와 고정 된 영역의 좌표를 나열 할 수 있습니다.
transform = "rotate (45,100,100)"회전 각도가 가장 먼저 추가됩니다. 이 코드에서 회전 각도는 45도입니다. 중심점은 다음에 추가 할 항목입니다. 여기서 중심점은 좌표 100, 100에 있습니다. 중심 위치 좌표를 입력하지 않으면 기본값 0,0이됩니다. 아래 예에서 각도는 여전히 45도이지만 중심점이 설정되지 않았으므로 기본값은 0,0입니다.
변환 = "회전 (45)"기본적으로 각도는 그래프의 오른쪽을 향합니다. 반대 방향으로 도형을 회전하려면 마이너스 기호를 사용하여 음수 값을 나열합니다.
transform = "회전 (-45)"각도가 360도 원을 기준으로하기 때문에 45도 회전은 1/4 회전입니다. 혁명을 360으로 표시하면 이미지가 완전히 원형으로 뒤집 혔기 때문에 이미지가 변경되지 않으므로 최종 결과는 사용자가 시작한 위치와 동일합니다.