SVG 변환을 재설정하는 방법 (즉, SVG 객체를 원래 상태로 되돌림)?

Question

저는 사용자가 svg 객체 (예 : 이미지)를 무한 횟수로 조작 할 수있는 응용 프로그램을 만들고 있습니다. 즉 회전하고 크기를 조절할 수 있습니다. 그리고 나는 SVG와 함께 작동하기 위해 Raphael.js을 사용합니다.

새 변환을 적용하기 전에 개체를 초기 상태로 "재설정"하여 새 변환이 이전 변환과 겹치지 않게하려면 어떻게합니까?

벨로 테스트 (그리고 여기의 작업 바이올린입니다 : jsfiddle.net/5TsW6/3/) 내가 처음과 동일한 변환을 적용하기 전에 두 번째 뷰포트에서 객체를 다시 시도했지만, 내 시도는 아무런 효과가 없었다 두 뷰포트에서 결과가 다르기 때문에,이 해야하는 경우 동일합니다 :

<div id="wrapper1" style="width:250px; height:250px; outline:1px solid invert; float:left; margin-right:5px;"></div> 
<div id="wrapper2" style="width:250px; height:250px; outline:1px solid invert; float:left;"></div>​ 

그리고 스크립트 :

var img_width=100, img_height=75, 
    canvas1, canvas2, 
    image1, image2, 
    w1, w2, // contours 
    x,y, // attributes "x" and "y" 
    rx,ry; // coordinates for the rotation pivot 

// Create the canvases 
canvas1 = new Raphael(document.getElementById("wrapper1"), 250, 250); 
canvas2 = new Raphael(document.getElementById("wrapper2"), 250, 250); 


// Add the images to the canvases  
image1 = canvas1.image("http://picselbocs.com/projects/cakemyface/image-gallery/intermediate/3295094303_2b50e5fe03_z.jpg",0,0,img_width,img_height); 
image2 = canvas2.image("http://picselbocs.com/projects/cakemyface/image-gallery/intermediate/3295094303_2b50e5fe03_z.jpg",0,0,img_width,img_height); 


// Modify (x,y) 
x = 40; 
y = 80; 
image1.attr({"x":x,"y":y}); 
image2.attr({"x":x,"y":y}); 


// Add the objects' contours 
canvas1.rect(x,y,img_width,img_height).attr({"stroke-width":"1px","stroke":"#00F"}); 
canvas2.rect(x,y,img_width,img_height).attr({"stroke-width":"1px","stroke":"#00F"}); 

// Compute the rotation pivot coordinates (the pivot should coincide with the object's center) 
var scaling = 1.2; 
rx = (x + img_width/2) * scaling; 
ry = (y + img_height/2) * scaling; 

// Apply transformations 
image1.transform("S"+scaling+","+scaling+",0,0R45,"+rx+","+ry); 
image2.transform("S"+scaling+","+scaling+",0,0R45,"+rx+","+ry); 



// ----- Here starts second transformation ------ // 
image2.transform("").transform("S"+scaling+","+scaling+",0,0r45,"+rx+","+ry); // I've attempted to reset the transform string, but with no effect 
​ 

Answer 1

리셋이 노력하고 있습니다. 두 번째 변환에서 오타를 만들었습니다. R45 대신 r45을 사용합니다. 즉, "적용하기 전에 이전 변환을 고려하십시오"라는 의미이므로 그 차이가 있습니다.