我正在尝试在
HTML文档中实现一项功能,允许用户拖放嵌入式SVG“框”…
我找到了this,但很快意识到该脚本只适用于普通的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,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
