Zurücksetzen SVG ursprüngliche Transformationsmatrix

Question

Ich versuche, meine SVG wieder in seinem ursprünglichen Transformationsmatrix Attribut zurückgesetzt werden. Ich habe eine Skalierungsfunktion, die diese Matrix verwendet, um das SVG zu vergrößern und zu verkleinern. Ich möchte jedoch in der Lage sein, das SVG auf die Transformationsmatrix zurückzusetzen, die es zuerst hatte.

I laden die erste Matrix Attribut in ein Array-Transformation, die ich dann in meiner Skala Funktion verwenden.

Wie kann ich die ursprünglichen Werte zu speichern, damit sie nicht durch meine Skalierungsfunktion berührt werden, und so kann ich ihnen die SVG zurücksetzen?

Hier ist meine JSfiddle

Das ist mein Skript:

$(document).ready(function() { 
    var newMatrix; 
    var transMatrix = $("#svgGroup").attr("transform").replace(/[^0-9.,]+/, ""); 
    transMatrix = transMatrix.split(","); 
    var origMatrix = [1,0,0,1, parseFloat(transMatrix[4]), parseFloat(transMatrix[5])]; 

    $("#out").click(function() { 
      zoom(0.8) 
    }); 
    $("#in").click(function() { 
      zoom(1.25); 
    }); 

    $("#reset").click(function() { 
     alert(origMatrix) 
      $("#svgGroup").attr("transform", "matrix(" + origMatrix + ")"); 
    }); 

    function zoom(scale) { 
      for (var i=0; i<origMatrix.length; i++) { 
        origMatrix[i] *= scale; 
      } 
      newMatrix = "matrix(" + origMatrix.join(' ') + ")"; 
      $("#svgGroup").attr("transform", newMatrix); 
    } 
    }); 

Answer 1

Sie müssen tiefen Klon das Original-Array. Um dies zu tun, Sie .slice(0)

var origMatrix = [1,0,0,1, parseFloat(transMatrix[4]), parseFloat(transMatrix[5])]; 
var initialValue = origMatrix.slice(0); 

verwenden

Nun ist es in der Reset-Funktion verwenden können.

$("#reset").click(function() { 
      origMatrix = initialValue.slice(0); 
      $("#svgGroup").attr("transform", "matrix(" + origMatrix + ")"); 
}); 

jsfiddle

Answer 2

Sie scheinen dies viel schwieriger zu machen, als es durch den Verzicht auf den SVG DOM sein muss. Das Zurücksetzen ist nur eine Frage der Veränderung der Skala wieder auf 1

Hier some simplified code.

$(document).ready(function() { 
     $("#out").click(function() { 
       zoom(0.8) 
     }); 
     $("#in").click(function() { 
       zoom(1.25); 
     }); 

     $("#reset").click(function() { 
       scale = 1.0/$("#svgGroup")[0].transform.baseVal.getItem(0).matrix.a; 
       zoom(scale); 
     }); 

     function zoom(scale) { 
       var transform = $("#svgGroup")[0].transform.baseVal.getItem(0); 
       transform.matrix.a *= scale; 
       transform.matrix.d *= scale; 
       transform.matrix.e *= scale; 
       transform.matrix.f *= scale; 
     } 
});