잘리지 않고 사각형을 회전하는 방법

1.5 인치 x 1.5 인치 직사각형을 만들고 외부를 경계선으로 추가했습니다. 45도 회전하면 모서리가 아래와 같이 잘립니다. 어떻게 자르지 않고 이와 같은 것을 회전시킬 수 있습니까? 잘리지 않고 사각형을 회전하는 방법

After Rotation

Before Rotation

나는 스냅와 CSS를이 SVG 모양을 회전 테스트했다. 저는 두 사람 사이에 매우 다른 결과를 얻습니다. 응용 프로그램과 함께 모양을 0-359도에서 회전 할 수 건물입니다. 두 모양 사이의 모양은 다음과 같습니다. 모양이 스냅으로 회전되어 멋지게 보이지만 div에 넣고 CSS로 회전하면 모양이 나 빠집니다. 그래서 나는 더 큰 SVG 영역과 그 영역의 모양을 중심으로 뭔가를 알아 내야 할 것이라고 생각합니다. 유일한 문제는 제가 약 80 개의 다양한 모양과 크기의 블록을 가지고 있다는 것입니다. SVG shape rotated with CSS

출처

2014-04-15 Trevor Orr

"바깥 쪽 이미지를 두 번 큰 것으로 뿌리 내라"는 무릎 덩어리 반응 외에는? – Tommy

나는 그것에 대해 생각해 보았지만 SVG를 중심으로했을 것입니다. 왜냐하면 SVG가 왼쪽 상단에 있다면 회전했을 때 왼쪽과 위쪽의 모서리를 잃어 버리게되기 때문입니다. 별로 이상적이지 않습니다. 어쩌면 SVG를 div에 넣고 jQuery를 사용하여 div를 회전 시키시겠습니까? –

센터를 배치하는 것이 이상적이지 않은 이유는 물체가 회전하기에 충분히 큰 영역을 갖는 것이 현명하게 보입니까? 그것은 당신이하고 싶은 일에 달려 있습니다. 만약에 그것이 분리되어 있다면 div 나 CSS 변환을 사용하면 Snap이 전혀 필요하지 않습니다. 계속 진행중인 다른 것들을 위해 Snap이 필요하다면, 그것을 중심에 두어야합니까? – Ian

당신이 사각형을 회전 당신이 그것을 회전하려는 지역이 1.4 X 광장의 길이가 있는지 확인하려면

SVG shape rotated with Snap

. 기본적으로, 모양의 경계 상자에서 가장 긴 대각선과 동일한 공간을 원합니다 (정사각형은 물론 가장 단순합니다).

CSS에서 이와 똑같은 작업을 수행하면 브라우저가 이미지 합성을 처리하고 요소의 명시적인 경계 영역이없는 것입니다. SVG 내에서 작업하는 경우 제한이 있으므로 그냥 수용하십시오.

출처

2014-04-29 19:41:32 heckj

잘리지 않고 사각형을 회전하는 방법

답변

관련 문제