代码在Codepen中工作,而不是在浏览器中工作:JavaScript在鼠标滚轮上缩放SVG
code working in codepen, not in browser: javascript to zoom svg on mousewheel
我错过了一些东西。我对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>
相关文章:
- iOS鼠标中心绑定只工作一次
- jquery鼠标选择无法正常工作
- 当我用鼠标左键点击时,让这个功能工作起来
- 鼠标输入鼠标离开没有按照我认为应该的方式工作
- 如何使用jQuery或JavaScript使鼠标滚轮不工作
- Kinectjs在画布上鼠标向下位置的准确性和clearRect未按预期工作
- 地图,rails 4.2,javascript,鼠标悬停,只工作一次(或两次).然后在重新加载之后
- 如何在ExtJS中构建无需鼠标即可工作的应用程序
- 按钮按下的鼠标按下事件侦听器不工作
- 如何使鼠标中键在 JavaScript 中使用 preventDefault() 正常工作
- 为什么鼠标滚轮在Chrome中工作,而在Firefox中不起作用
- 鼠标悬停在整个页面上工作,而不是一个元素
- 无法将鼠标悬停在 xCharts 中工作
- 鼠标悬停时显示图像(在带有 jsfiddle 的工作示例中)
- D3JS 强制引导,鼠标悬停在线链接无法正常工作
- 为什么此鼠标悬停脚本无法正常工作
- Javascript鼠标抖动游戏无法正常工作
- 穆森特和鼠标效果无法正常工作
- 鼠标无法在Android网页上工作
- 鼠标悬停不工作