javascript - 根据鼠标位置缩放到 SVG 的不同部分

Question

所以 I've found a script这似乎就是这样做的，但它放大了 <g>通过对其应用转换矩阵来包装整个 svg 内容(尽管它不会因为嗅探而放大 Opera)。将所有元素包装在 <g> 中不是一个选项，因为我正在制作图像查看器并且可能会加载不同的文件。

设置transform="matrix(...)"在根上 <svg>没有效果。设置currentScale在 <svg>缩放图片但从左上角开始，而不是从鼠标位置或图像中心开始。而且平移功能也不起作用，因为似乎无法拖动整个 <svg>元素。

操纵 viewBox属性似乎很有用，但要找出它的必要值真的很棘手。

那么你能想出一种在这种情况下进行缩放和平移的方法吗？

您可以下载 demo here .需要在您的计算机上安装 Opera。

Answer 1

除了 currentScale 之外，还有一个可以修改的 currentTranslate 属性。