Schaltplan

        var mousekey = -1;
        var mX = 0, mY = 0;

        svg.addEventListener('mousedown', event => {
            console.log('svg mouse: ', event.button);
            mousekey = event.button;
            mX=event.x;
            mY=event.y
            if(mousekey==1){zoom(1.7)}
            else if(mousekey==2){zoom(0.6)};
        });
        svg.addEventListener('mouseup', event => {
            mousekey = -1;
            mX=mY=0;
        });
        svg.addEventListener('mousemove', event => {
            if(mousekey!=0)return;
            var x=mX-event.x;
            var y=mY-event.y;
            mX=event.x;
            mY=event.y;pan(-x*0.7,-y*0.7);
        });

 <script
     type="text/javascript"
     id="script21323"><![CDATA[
        var transformMatrix = [1, 0, 0, 1, 0, 0];
        var svg = document.getElementById('schaltplantemplate');
        var matrixGroup = svg.getElementById("matrix");
        var mousekey = -1;
        var mX = 0, mY = 0;
        var zooom = 1.2, offset, coord;
        var _hor=false,_vert=false;

        svg.addEventListener('mousedown', event => {
            console.log('svg mouse: ', event.button);
            mousekey = event.button;
            offset = getMousePosition(event);
            mX = offset.x;
            mY = offset.y
        });
        svg.addEventListener('mouseup', event => {
            mousekey = -1;
        });
        svg.addEventListener('mousemove', event => {
            if (mousekey != 0)
                return;
            coord = getMousePosition(event);
            var x = mX - coord.x;
            var y = mY - coord.y;
            mX = coord.x;
            mY = coord.y;
            pan(-x, -y);
        });
        svg.addEventListener('keyup', event => {
            _hor=_vert=false;
        });
        svg.addEventListener('keydown', event => {
            console.log('svg keydown: ', event.key);

            switch (event.key) {
            case 'ArrowDown':
                pan(0, -50);
                break;
            case 'ArrowUp':
                pan(0, 50);
                break;
            case 'ArrowLeft':
                pan(50, 0);
                break;
            case 'ArrowRight':
                pan(-50, 0);
                break;
            case '+':
                zoom(1.7);
                break;
            case '-':
                zoom(0.6);
                break;
            case 'h':
                _hor=true;
                break;
            case 'v':
                _vert=true;
                break;
            default:
                //console.log(`+;-;arrows erlaubt`);
            }
        });
        if (navigator.userAgent.toLowerCase().indexOf('webkit') >= 0)
            window.addEventListener('mousewheel', handleMouseWheel, false); // Chrome/Safari
        else
            window.addEventListener('DOMMouseScroll', handleMouseWheel, false); // Others
        
        function handleMouseWheel(evt) {

            var delta;
            if (evt.wheelDelta) {
                delta = evt.wheelDelta / 360; // Chrome/Safari
            } else {
                delta = evt.detail / -9; // Mozilla
            }
            if (_vert) {
                pan(0, delta*100);
            } else if (_hor) {
                pan(delta*100, 0);
            } else {
                var z = Math.pow(zooom, delta);
                zoom(z)
            }
        }
        function show(caller, elem) {
            var style = svg.getElementById(elem).style.display;
            if (style === "none") {
                svg.getElementById(elem).style.display = "block";
                svg.getElementById(caller).style.opacity = 0.75;
            } else {
                document.getElementById(elem).style.display = "none";
                svg.getElementById(caller).style.opacity = 0.3;
            }
        }

        function pan(dx, dy) {
            transformMatrix[4] += dx;
            transformMatrix[5] += dy;
            setMatrix();
        }

        function zoom(scale) {
            for (var i = 0; i < 6; i++) {
                transformMatrix[i] *= scale;
            }
            coord = getMousePosition(event);
            transformMatrix[4] += (1 - scale) * coord.x //centerX;
            transformMatrix[5] += (1 - scale) * coord.y //centerY;
            setMatrix();
        }

        function setMatrix() {
            var newMatrix = "matrix(" + transformMatrix.join(' ') + ")";
            matrixGroup.setAttributeNS(null, "transform", newMatrix);
        }

        function getMousePosition(evt) {
            var CTM = svg.getScreenCTM();
            return {
                x: (evt.clientX - CTM.e) / CTM.a,
                y: (evt.clientY - CTM.f) / CTM.d
            };
        }
        ]]></script>