SVG에서 객체 회전

SVG를 시작하면서 이제 회전 객체를 시도하고 있습니다.SVG에서 객체 회전

나는 초기 캔버스를 가지고 있으며 내 자신의 드래그 앤 드롭 기능을 만들었습니다. 따라서 mousedown에서 드래그가 초기화되고 mouseup이 중지됩니다. 내가 가지고있는 문제는 객체를 회전시킬 때 x와 y를 변경하는 것입니다. 이것은 객체를 드래그하려고 할 때 표시됩니다. 누구든지 x와 y가 회전 각도와 관련하여 "정규화"되도록이 문제를 해결하는 방법을 알고 있습니까?

여기 내 코드가 있습니다.

<svg version="1.1" width="900" height="400"><text x="10" y="10" id="text_0" width="200" height="40" transform="rotate(45, 0, 0)">SVG test</text></svg>

감사

출처

2012-02-29 tmutton

rotate 매개 변수 (예 : MDN 참조)에게 각도와 회전 중심을 제공합니다. 그리고 어쨌든 width 및 height 속성은 무엇입니까? 이것은 here 표준의 일부가 아닙니다. 텍스트 크기를 변경하려면 스타일에서 font-size을 사용하십시오.

당신은 다음과 같은 예를 들어 사용할 수의 (텍스트 요소의) 중심 주위의 텍스트를 회전하려면 :

<?xml version="1.0" encoding="UTF-8"?> 
<svg version="1.1" width="900" height="400" xmlns="http://www.w3.org/2000/svg"> 
    <text x="10" y="10" id="text_0" transform="rotate(45, 10, 10)" style="dominant-baseline: middle; text-anchor: middle;"> 
    SVG test 
    </text> 
</svg>

출처

2012-02-29 15:20:28 Sirko

폭과 높이 속성이 날은 장난이었다. 불행히도 코드가 저에게 효과적이지 않았습니다. 지난 번과 같은 결과를 얻었습니다. 내 이해에서, x와 y는 물체의 왼쪽 위에 있지만 물체가 회전 할 때 x와 y 점은 회전과 함께 움직입니다. 스타일 속성이 '왼쪽 위'또는 이에 상응하는 속성이 아니어야합니까? – tmutton

드래그 앤 드롭 코드가 포함 된 jsfiddle을 제공 할 수 있습니까? – Sirko

여기에 http://jsfiddle.net/pKwkj/2/ 페이지에 쓰레기가 많습니다. 테스트하는 것뿐입니다. 페이지로드시 페이지의 왼쪽 상단에있는 텍스트 링크를 클릭하면 화면 왼쪽에 텍스트가 표시됩니다 (드래그 가능). 텍스트 객체를 추가하는 click 이벤트는 $ ('. add.text')입니다. 클릭 – tmutton

SVG에서 객체 회전

답변

관련 문제