我正在创建一个交互式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>