javascript 在 HTML 文档中使用鼠标滚轮进行 SVG 缩放
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15073324/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
SVG zoom with mouse wheel inside HTML document
提问by Vlad
I'm attempting to implement a functionality in an HTML document which allows users to drag and zoom in an embedded SVG 'box'...
我正在尝试在 HTML 文档中实现一项功能，该功能允许用户拖动和放大嵌入的 SVG 'box'...
I found this, but soon enough realised that that script only works with plain SVG files...
我发现了这个，但很快就意识到该脚本仅适用于普通的 SVG 文件......
Keep in mind that I'm a programmer who has been working exclusively with assembly language for the past half year. Jumping from that to this abstract environment is a huge step.
请记住，我是一名程序员，过去半年一直专门使用汇编语言。从那个跳到这个抽象的环境是一个巨大的进步。
Right now I'm trying to figure out just the zooming part:
现在我正试图弄清楚缩放部分：
So I made this HTML file:
所以我制作了这个 HTML 文件：
<html>
<head>
<title>Forum Risk! v0.0.1</title>
<script type="text/javascript" src="svglib.js" ></script>
</head>
<body>
<!-- SVG embedded directly for example purpose... I'm planning to use <embed> -->
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" onmousewheel="mouseWheelHandler(e);">
<g id="viewport" transform="matrix(1,0,0,1,200,200)" >
<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>
</g>
</svg>
</body>
And the contents of svglib.jsare:
其内容svglib.js是：
var scrollSensitivity = 0.2
function mouseWheelHandler(e) {
var evt = window.event || e;
var scroll = evt.detail ? evt.detail * scrollSensitivity : (evt.wheelDelta / 120) * scrollSensitivity;
var transform = document.getElementById("viewport").getAttribute("transform").replace(/ /g,"");
var vector = transform.subString(transform.indexOf("("),transform.indexOf(")")).split(",")
vector[0] = (parseInt(vector[0]) + scroll) + '';
vector[3] = vector[0];
document.getElementById("viewport").setAttribute("transform",
"matrix(".concat(vector.join(), ")"));
return true;
}
I used http://www.javascriptkit.com/javatutors/onmousewheel.shtmlfor reference.
我使用http://www.javascriptkit.com/javatutors/onmousewheel.shtml作为参考。
But the problem is that as soon as I open the HTML file with Chrome, the SVG shows up, but nothing happens at all when I scroll with my mouse wheel...
但问题是，一旦我用 Chrome 打开 HTML 文件，SVG 就会显示出来，但是当我用鼠标滚轮滚动时，什么也没有发生......
Have I understood all of this completely wrong?
我是否完全错误地理解了所有这些？
UPD
UPD
Fixed version http://jsfiddle.net/dfsq/GJsbD/
采纳答案by Vlad
Solved!Apparently the onmousewheel attribute doesn't handle the event correctly... at least I had to add an event listener directly through javascript to the SVG canvas to make it work!
解决了！显然 onmousewheel 属性不能正确处理事件......至少我必须通过 javascript 直接向 SVG 画布添加一个事件侦听器才能使其工作！
回答by Andrew Mao
Usually, it's not a great idea to implement this stuff with bare javascript. There are plenty of great libraries that allow you to do this in a few lines, and probably will have much fewer possibilities for errors.
通常，用裸 JavaScript 实现这些东西并不是一个好主意。有很多很棒的库可以让您在几行代码中完成此操作，并且出错的可能性可能要少得多。
A prominent example that comes to mind is d3. The capabilities in this mashupseem to be pretty much what you want.
If you want to implement something similar for your application, you basically just need to recalculate the transform matrix on zoom events. d3 can give you the mouse event data, and also simplify the process of changing attributes. Check out the source and give it a try!
如果你想为你的应用程序实现类似的东西，你基本上只需要在缩放事件上重新计算变换矩阵。d3 可以为您提供鼠标事件数据，也可以简化更改属性的过程。查看源代码并尝试一下！
