如何重置SVG轉換（即將SVG對象返回到其原始狀態）？

Question

我正在構建一個應用程序，用戶可以無限次操作svg對象（例如圖像），即旋轉和縮放它們。我使用Raphael.js與SVG一起工作。

如何在應用新轉換之前將對象重置爲其初始狀態，以便新轉換不會重疊前一個對象？

貝婁是一個測試（這裏是它的工作小提琴：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，意思是「在應用之前考慮以前的轉換」，因此有所不同。