Question

我错过了一些东西..我对javascript很新，所以它可能很简单！？

codepen（http://codepen.io/robertwebb364/pen/uFcHI）显示使用矩阵变换来缩放svg组，同时将其保持在屏幕的中心...

工作正常，但在桌面上的浏览器中运行本地文件时，完全相同的代码不起作用。（主要使用Chrome，但也尝试过firefox和safari - 结果相同，没有缩放！ - 并且控制台上没有报告错误。）

[注意：这篇文章（Code works in JSFiddle and Codepen but not in browser, where am I gone wrong?）报告了一个类似的问题 - 在这种情况下，这是由于浏览器如何解释脚本库的文件路径......在我的案例中不是问题因为没有外部库]

我也试过添加一个setInterval，但无济于事：

var timer=setInterval("zoom()", 100);

以下是核心代码：

function init(evt)
   {
    if ( window.svgDocument == null )
    {
      svgDoc = evt.target.ownerDocument;
    }
    ellgroup = svgDoc.getElementById("ellgroup");
    document.addEventListener("mousewheel", MouseWheelHandler, false);
  } 


function MouseWheelHandler(e) {
    var evt = window.event || e;
    delta=e.wheelDelta;
    cumdelta+=delta;
    if (cumdelta<0) {
    scale=-100/cumdelta;
    } else {
        scale=100/cumdelta;
    }
    zoom(scale);
    return false;
}


function zoom(scale) {
transMatrix[0] = scale*transMatrixorig[0];
transMatrix[3] = scale*transMatrixorig[3];
transMatrix[4] = transMatrixorig[4]+(xcent-(scale*xcent)); 
transMatrix[5] = transMatrixorig[5]+(ycent-(scale*ycent));

newMatrix = "matrix(" +  transMatrix.join(' ') + ")";
ellgroup.setAttribute("transform", newMatrix);
}

Answer 1

正在工作......

毕竟是一个非常小的错误.. 标签被不正确地关闭..应该是

<g id="".. *etc* > // before the graphic elements to be grouped
</g> // after the graphic elements

在我的代码的桌面版本中：

<g id="".. *etc* />   // spot the extra "/" !
 </g>

代码在codepen中工作，而不是在浏览器中：javascript来缩放鼠标滚轮上的svg

1 个答案: