在HTML文档中使用鼠标滚轮进行SVG缩放

Question

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“框”中拖动和缩放...

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.js are: 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.shtml for 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/ 固定版本http://jsfiddle.net/dfsq/GJsbD/

Answer 1

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画布上，以使其正常工作！

Answer 2

Usually, it's not a great idea to implement this stuff with bare javascript. 通常，用裸露的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. 有很多很棒的库，使您可以在几行中完成此操作，并且可能出现错误的可能性要少得多。

A prominent example that comes to mind is d3 . 想到的一个著名例子是d3 。 The capabilities in this mashup seem 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. d3可以为您提供鼠标事件数据，还可以简化更改属性的过程。 Check out the source and give it a try! 查看源代码并尝试一下！

在HTML文档中使用鼠标滚轮进行SVG缩放

问题描述

UPD UPD

2 个解决方案

解决方案1
3 已采纳 2013-02-27 18:58:39

解决方案2
-3 2013-02-25 18:32:29

在HTML文档中使用鼠标滚轮进行SVG缩放

问题描述

UPD UPD

2 个解决方案

解决方案1 3 已采纳 2013-02-27 18:58:39

解决方案2 -3 2013-02-25 18:32:29

解决方案1
3 已采纳 2013-02-27 18:58:39

解决方案2
-3 2013-02-25 18:32:29