JavaScript SVG缩放移动SVG

我已经为我的SVG编写了这段代码，当用户滚动时，SVG会放大/缩小

    svgRootNode.addEventListener('wheel', function (e) {
        let transformationMatrix = this.getAttribute("transform").replace("matrix(", "").replace(")", "").trim().split(" ");

        let deltaZoom = e.wheelDelta / 1800;

        transformationMatrix[0] = Number(transformationMatrix[0]) + deltaZoom;
        transformationMatrix[3] = Number(transformationMatrix[3]) + deltaZoom;

        if (transformationMatrix[0] <= 0) {
            transformationMatrix[0] = 0.05;
        }

        if (transformationMatrix[3] <= 0) {
            transformationMatrix[3] = 0.05;
        }



        this.setAttribute("transform", "matrix(" + transformationMatrix.join(" ") + ")");
    });

svgRootNode.addEventListener（'wheel'，函数（e）{
让transformationMatrix=this.getAttribute（“transform”）.replace（“矩阵”（“，”）.replace（“）”，”）.trim（）.split（“”）；
设deltaZoom=e.wheelDelta/1800；
transformationMatrix[0]=数字（transformationMatrix[0]）+deltaZoom；
transformationMatrix[3]=数字（transformationMatrix[3]）+deltaZoom；
if（变换矩阵[0]在原点周围画东西，或者说明在缩放变换中它不是在原点周围画的。是的，我是从原点画的，我们说不出来，因为问题中没有标记。如果原点在你的画的中心，那么你的一些坐标应该是负的。我猜它们都不是。是的，没有它们是。我将在一天内到家后发布标记。我已经添加了SVG标记。
<svg width="2500" height="240" transform="matrix(1 0 0 1 0 0)">
    <rect data-id="1" x="20" y="20" width="100" height="100" fill="#03A9F4"></rect>
    <circle cx="30" cy="130" r="4" fill="red"></circle>
    <circle cx="10" cy="50" r="4" fill="red"></circle>
    <text x="70" y="70" fill="rgb(255, 255, 255)" font-family="Verdana" font-size="12" text-anchor="middle" dominant-baseline="middle">Meeting Room</text>
    <rect data-id="2" x="140" y="20" width="200" height="100" fill="#8BC34A"></rect>
    <circle cx="130" cy="40" r="4" fill="red"></circle>
    <text x="240" y="70" fill="rgb(255, 255, 255)" font-family="Verdana" font-size="12" text-anchor="middle" dominant-baseline="middle">Pantry</text>
    <rect data-id="3" x="0" y="140" width="500" height="100" fill="#795548"></rect>
    <circle cx="250" cy="130" r="4" fill="red"></circle>
    <text x="250" y="190" fill="rgb(255, 255, 255)" font-family="Verdana" font-size="12" text-anchor="middle" dominant-baseline="middle">Workspace</text>
    <rect data-id="4" x="500" y="140" width="2000" height="100" fill="#000000"></rect>
    <circle cx="750" cy="130" r="4" fill="red"></circle>
    <text x="1500" y="190" fill="rgb(255, 255, 255)" font-family="Verdana" font-size="12" text-anchor="middle" dominant-baseline="middle">Workspace 2</text>
    <circle cx="10" cy="130" r="2" fill="black"></circle>
    <circle cx="130" cy="130" r="2" fill="black"></circle>
    <circle cx="340" cy="130" r="2" fill="black"></circle>
    <circle cx="130" cy="10" r="2" fill="black"></circle>
    <circle cx="30" cy="130" r="2" fill="black"></circle>
    <circle cx="130" cy="40" r="2" fill="black"></circle>
    <circle cx="250" cy="130" r="2" fill="black"></circle>
    <circle cx="10" cy="10" r="2" fill="black"></circle>
    <circle cx="10" cy="50" r="2" fill="black"></circle>
    <line x1="30" y1="120" x2="30" y2="130" stroke="green"></line>
    <line x1="30" y1="130" x2="130" y2="130" stroke="green"></line>
    <line x1="130" y1="130" x2="130" y2="40" stroke="green"></line>
    <line x1="130" y1="40" x2="140" y2="40" stroke="green"></line>
</svg>