SVG 在 chrome 中使用 svgcanvas 缩放鼠标滚轮答案

【问题标题】：SVG zoom on mouse wheel using svgcanvas in chromeSVG 在 chrome 中使用 svgcanvas 缩放鼠标滚轮
【发布时间】：2014-08-11 18:42:34
【问题描述】：

我正在尝试在鼠标滚轮上缩放 svg。在 IE 中它工作正常，但在 chrome 中没有响应。我的 svg 看起来像.. 示例.. 它不是确切的。

<svg width="1188" height="840" zoomAndPan="magnify" style="fill:none;stroke:black; font-size:4.07314px;stroke-width:0.509143"  viewBox="0 0 1188 840">

<g id="XMP_1" style="stroke:#000000; stroke-width:0.339429">
  <path d="M554 401L641 401" style="stroke:#0000FF; stroke-dasharray: 3.5640  3.5640  3.5640  3.5640"/>
</g>

</svg>

我的缩放功能如下：

var zoomToUserPoint = function (userPoint, zoomFactor) {
            // This will usually cause a resize event, so we need to flag that it was caused by
            // internal interaction with the SVG document.
            currentView.internalResize = true;

            // changing the scale will raise a zoom event (immediately) 
            // which will affect where the centre of the screen will be in user coordinates
            if (zoomFactor !== 1) {
                var newscale = applyScalingLimits(svgroot.currentScale * zoomFactor);

                // THIS currentScale NEVER CHANGES IN CHROME

                if (newscale !== svgroot.currentScale) {
                    svgroot.currentScale = newscale;
                }
            }

            var currentScale = canvas.getScale();

            // get the centre of the screen in user coordinates
            var screenCentre = svgUtilities.screenCoordinateTransform(canvas.getScreenCentre(), svgroot);

            // compute necessary change to current translation to centre screen point
            svgroot.currentTranslate.x = svgroot.currentTranslate.x + (screenCentre.x - userPoint.x) / currentScale.x;
            svgroot.currentTranslate.y = svgroot.currentTranslate.y + (screenCentre.y - userPoint.y) / currentScale.y;

            // Cache the current view centre
            //currentView.viewCentre = svgUtilities.screenCoordinateTransform(canvas.getScreenCentre(), svgroot);

            // need to resize selector grips etc for any selected mark-up
            canvas.resizeSelectors();

            // Flag that we have finished with any interaction that may have caused a resize event
            currentView.internalResize = false;
        };

我试图找出问题并发现 svg currentScale 属性在谷歌浏览器上没有改变。

如何解决这个问题？我现在很沮丧..根本没有修复... :(

【问题讨论】：

applyScalingLimits 有什么作用？
它限制了最大缩放。问题仅在于 chrome，其中 svgroot.currentScale 永远不会更改，并且每次它的 1 时，其他浏览器（例如 IE）将 newscale 分配给当前比例。

标签： javascript html google-chrome svg

【解决方案1】：

这在 Chrome 中已经存在一段时间了。

这是一个已注册错误http://code.google.com/p/chromium/issues/detail?id=174568 的链接但这之前已被注册为错误并被忽略

错误条目包含一个指向 currentScale 的 SVG 规范的链接和一个指向演示问题的 Plunker 的链接

【讨论】：

是的，我知道这一点。有什么解决方法吗？我尝试在 CSS 上设置 webkit 比例。但我无法让它在鼠标滚轮上工作。
这并不能真正回答问题 - 您已经解释了原因，但问题是寻求解决方案。你知道有什么方法可以实现@Joe 的目标吗？
虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接的答案可能会失效。