缩放到 SVG 文档中的光标位置

Zooming to cursor position in SVG documents

本文关键字：光标 位置 文档 SVG 缩放      更新时间：2023-09-26

尝试缩放到光标的位置。我在缩放（缩放）时正在翻译图像，但无法正常工作。

如果你

尝试演示，你不会，如果你缩放到一个位置，移动鼠标并缩放到另一个位置，圆圈会跳跃。

js小提琴：http://jsfiddle.net/nadirabid/f06n05ep/9/

function setCTM(element, matrix) {
  var m = matrix;
  var s = "matrix(" + m.a + "," + m.b + "," + m.c + "," + m.d + "," + m.e + "," + m.f + ")";
  element.setAttributeNS(null, "transform", s);
}
var svgEl = document.getElementById('svg');
var zoomEl = document.getElementById('zoom');
var zoomScale = 1;
svgEl.addEventListener('wheel', function(e) {
  var delta = e.wheelDeltaY;
  zoomScale = Math.max(0.5, zoomScale - (delta / 2200));
  zoomScale = Math.min(zoomScale, 1.5);
  var p = svgEl.createSVGPoint();
  p.x = e.clientX;
  p.y = e.clientY;
  p = p.matrixTransform(svgEl.getCTM().inverse());
  var zoomMat = svgEl.createSVGMatrix()
    .translate(p.x, p.y)
    .scale(zoomScale)
    .translate(-p.x, -p.y);
  setCTM(zoomEl, zoomMat);
});
svg {
  background-color: #eee;
}
body {
  overflow: hidden;
}
<svg id="svg" width="400" height="400">
  <g id="zoom">
    <circle r="40" cx="200" cy="200"></circle>
  </g>
</svg>

发生这种情况是因为您完全替换了旧矩阵，而没有考虑以前的"缩放历史记录"。

您应该做的是读取（或记住）旧矩阵，然后对其应用新的翻译和缩放操作。

相关文章：