자바 스크립트를 사용하여 SVG 회전

HTML 페이지에 SVG 이미지를 만들었으므로 이제 JavaScript 버튼을 사용하여 SVG 모양을 이동하고 싶습니다. 내 응용 프로그램의 JSFiddle은 다음과 같습니다. http://jsfiddle.net/johndavies91/xwMYY/자바 스크립트를 사용하여 SVG 회전

버튼이 표시되었지만 버튼을 클릭해도 해당 기능이 표시되지 않습니다.

기능 코드는 다음과 같습니다.

function rotatex() { 
document.getElementById("inner-arrow").setRotate(45,NativeCenterX,NativeCenterY) 
} 
function rotatey() { 
document.getElementById("middle-arrow").setRotate(45,NativeCenterX,NativeCenterY) 
} 
function rotatez() { 
document.getElementById("outer-arrow").setRotate(45,NativeCenterX,NativeCenterY) 
}

및 해당 버튼;

<input id="button1" type="button" value="Rotate Inner Short Arrows 45*" 
     onclick="rotatex()"/> 
<input id="button1" type="button" value="Rotate Middle Short Arrows 45*" 
     onclick="rotatey()"/> 
<input id="button1" type="button" value="Rotate Outer Short Arrows 45*" 
     onclick="rotatez()"/>

나는 모양 '기원의 주위를 회전하는 것을 시도하고있다. 누군가가 내게이 코드가 작동하지 않는 이유를 에게 설명 할 수 있습니까? 감사합니다.

출처

2014-04-16 JRD91

'setRotate()'를 사용하여 성공 했습니까? 브라우저 지원이 있다면 꽤 최근 인 것 같지만,'setAttribute ('transform', 'rotate (...)')'같은 결과를 항상 사용할 수 있습니다. – helderdarocha

당신의 바이올린을 테스트 한 결과,'rotatex'가 정의되지 않았기 때문에 JS가 실행되지 않는 것 같습니다 (브라우저에서 JavaScript 콘솔을 켜면이 오류를 볼 수 있습니다). ''에 넣으면 포크가됩니다. (이 작업 [JFiddle] (http://jsfiddle.net/helderdarocha/xwMYY/1/)이 어떻게 구성되어 있는지보십시오) – helderdarocha

여기에 업데이트 바이올린 참조 :이 .setAttribute("transform", "rotate(45)") 대신 setRotate 사용 http://jsfiddle.net/2da4B/

을 :

function rotatex() { 
    var innerArrow = document.getElementById("inner-arrow"); 
    innerArrow.setAttribute("transform", "rotate(45)"); 
}

이것은 0,0 기원 주위에 45도 회전 - 그것은 그건 당신이 무엇을 찾고 있는지의 여부를 질문에서 분명하지 않다 에 대한.

출처

2014-04-16 17:50:06 nrabinowitz

안녕 , 나는 각 화살표의 중심 인 그들의 기점을 중심으로 화살표를 회전 시키려고했다. 또한 버튼을 여러 번 클릭 할 수 있기를 원합니다. 감사! – JRD91

하이 - http://jsfiddle.net/2da4B/1/에서 후속 클릭 문제를 확인하십시오. 회전 원점의 경우, 회전에 사용할 점에서 원점을 사용하여 다각형을 정의하는 것이 훨씬 쉽습니다. – nrabinowitz

SVG 작품에 외부 라이브러리를 사용하시기 바랍니다. 예 : Raphaël. .

여기에 링크 http://raphaeljs.com입니다. 이 라이브러리의 도움으로 쉽게 작업을 완료 할 수 있습니다.

출처

2014-04-16 03:12:08

고마워요,하지만 이것을 완료하기위한 외부 라이브러리. 이 경우 – JRD91

, 난 그 링크가 당신을 도울 수있는 것 같아요 : http://jsfiddle.net/FrEeA/ http://www.petercollingridge.co.uk/blog/svg-animation-rotating-elements –

- (대시)을 _ (밑줄)으로 바꿔보십시오.

출처

2014-04-16 17:34:08

자바 스크립트를 사용하여 SVG 회전

답변

관련 문제