SVG使用chrome中的svgcanvas放大鼠标滚轮

时间:2014-07-31 09:44:55

标签: javascript html google-chrome svg

我正在尝试缩放鼠标滚轮上的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属性在Google Chrome上没有变化。

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

1 个答案:

答案 0 :(得分:0)

这已经是Chrome中的一个错误了一段时间了。

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

错误条目包含指向currentScale的SVG规范的链接以及指示问题的Plunker的链接