在html画一个自动缩放圆环,javascript – 在HTML文档中使用鼠标滚轮进行SVG缩放

我正在尝试在

HTML文档中实现一项功能,允许用户拖放嵌入式SVG“框”…

我找到了this,但很快意识到该脚本只适用于普通的SVG文件……

请记住,我是一名程序员,过去半年一直专注于汇编语言.从那里跳到这个抽象的环境是一个巨大的进步.

现在我正试图找出缩放部分：

所以我制作了这个HTML文件：

Forum Risk! v0.0.1

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;

}

但问题是,只要我用Chrome打开HTML文件,SVG就会出现,但是当我用鼠标滚轮滚动时根本没有任何反应……

我完全理解这一切吗？

UPD