将SVG重置为原始变换矩阵

Reset SVG to original transform matrix

本文关键字：变换 原始 SVG      更新时间：2023-09-26

我试图将SVG重置回其原始变换矩阵属性。我有一个缩放函数，它使用这个矩阵来放大和缩小SVG。但是，我希望能够将SVG重置回它最初拥有的转换矩阵。

我首先将transform matrix属性加载到一个数组中，然后在我的scale函数中使用它。

我如何存储原始值，使它们不会被我的缩放函数触及，所以我可以使用它们来重置SVG?

这是我的jsfield

这是我的脚本:

$(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);
    }
    });

您必须深度克隆原始数组。为了做到这一点，使用.slice(0) 

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

现在你可以在你的重置功能中使用它。

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

jsfiddle

由于不使用SVG DOM，似乎使这比需要的困难得多。重置仅仅是将比例变回1的问题。

下面是一些简化的代码。

$(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;
        }
});
相关文章：