限制SVG的缩放

时间:2019-06-22 19:02:39

标签: svg zoom pan

我正在创建一个交互式SVG平移,该平移使用以下代码进行缩放和平移。该地图包含在div中,但是此刻SVG图像会缩放到超出容器底部边界的位置。反正有阻止这种情况发生的方法吗?

<script type="text/javascript"><![CDATA[
            var transformMatrix = [1,0,0,1,0,0];
            var svg = document.getElementById('svg-map');
            var viewBox = svg.getAttributeNS(null, "viewBox").split(" ");
            var centerX = parseFloat(viewBox[2])/2;
            var centerY = parseFloat(viewBox[3])/2;
            var matrixGroup = svg.getElementById("matrix-group");

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

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

            function zoom(scale) {
                for(var i = 0; i < 4; i++) {
                    transformMatrix[i] *= scale;
                }

                transformMatrix[4] += (1-scale) * centerX;
                transformMatrix[5] += (1-scale)* centerY;

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

            function reset() {

                }
        ]]></script>

0 个答案:

没有答案