在HTML文檔中使用鼠標滾輪進行SVG縮放

Question

我正在嘗試在HTML文檔中實現一項功能，該功能允許用戶在嵌入式SVG“框”中拖動和縮放...

我發現了這一點，但很快就意識到該腳本僅適用於普通的SVG文件...

請記住，我是一個過去半年一直專門使用匯編語言的程序員。 從此過渡到抽象環境是一個巨大的步驟。

現在，我正嘗試找出縮放部分：

所以我做了這個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>

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;

}

我使用http://www.javascriptkit.com/javatutors/onmousewheel.shtml作為參考。

但是問題是，一旦我用Chrome打開HTML文件，就會顯示SVG，但是當我用鼠標滾輪滾動時什么也沒有發生...

我是否完全理解所有這些錯誤？

UPD

固定版本http://jsfiddle.net/dfsq/GJsbD/

Answer 1

解決了！ 顯然onmousewheel屬性無法正確處理事件……至少我必須直接通過JavaScript將事件監聽器添加到SVG畫布上，以使其正常工作！

Answer 2

通常，用裸露的javascript實現這些東西不是一個好主意。 有很多很棒的庫，使您可以在幾行中完成此操作，並且可能出現錯誤的可能性要少得多。

想到的一個著名例子是d3 。 混搭中的功能似乎正是您想要的。

如果要為您的應用程序實現類似的操作，則基本上只需要在縮放事件上重新計算變換矩陣。 d3可以為您提供鼠標事件數據，還可以簡化更改屬性的過程。 查看源代碼並嘗試一下！

在HTML文檔中使用鼠標滾輪進行SVG縮放

問題描述

UPD

2 個解決方案

解決方案1
3 已采納 2013-02-27 18:58:39

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

在HTML文檔中使用鼠標滾輪進行SVG縮放

問題描述

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