代码在Codepen中工作,而不是在浏览器中工作:JavaScript在鼠标滚轮上缩放SVG

code working in codepen, not in browser: javascript to zoom svg on mousewheel

本文关键字:工作 鼠标 JavaScript 缩放 SVG Codepen 浏览器 代码      更新时间:2023-09-26

我错过了一些东西。我对javascript相当陌生,所以它可能很简单!?

代码笔 (http://codepen.io/robertwebb364/pen/uFcHI( 显示使用矩阵转换来缩放 svg 组,同时将其保持在屏幕中心......

工作正常,但是在我的桌面上的浏览器中运行本地文件时,完全相同的代码不起作用。(主要使用Chrome,但也尝试了Firefox和Safari - 相同的结果,没有缩放! - 控制台上没有报告错误(。

[注意:这篇文章(代码在JSFiddle和Codepen中工作,但在浏览器中不起作用,我哪里出错了?(报告了一个类似的问题 - 在这种情况下,这是由于浏览器如何解释脚本库的文件路径...就我而言不是问题,因为没有外部库]

我还尝试添加一个 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);
}

现在正在工作...

结果毕竟是一个非常小的错误打字..标签未正确关闭。.应该是

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

在我拥有的代码的桌面版本中:

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