SVG使用鼠标滚轮放大HTML文档 [英] SVG zoom with mouse wheel inside HTML document
问题描述
我试图在一个HTML文档中实现一个功能，允许用户拖动和放大嵌入的SVG'框'...
我发现<一个href =http://www.cyberz.org/blog/2009/12/08/svgpan-a-javascript-svg-panzoomdrag-library/ =nofollow>这个，但很快就足够了意识到这个脚本只适用于简单的SVG文件...
请记住，我是一位程序员，他在过去的半年中一直使用汇编语言。跳到这个抽象的环境是一个巨大的进步。
现在我试图弄清楚缩放部分：
所以我制作了这个HTML文件：
< html>
< head>
< title>论坛风险！ v0.0.1< /标题>
< script type =text / javascriptsrc =svglib.js>< / script>
< / head>
< body>
<！ - 直接嵌入的SVG用于示例目的......我打算使用< embed> - >
< svg xmlns =http://www.w3.org/2000/svgversion =1.1onmousewheel =mouseWheelHandler（e）;>
< g id =viewporttransform =matrix（1,0,0,1,200,200）>
< / svg>
< / body>
以及 svglib.js 是：
var scrollSensitivity = 0.2
函数mouseWheelHandler（e）{
var evt = window.event || Ë;
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（），）））;
返回true;
}
我使用了 http://www.javascriptkit.com/javatutors/onmousewheel.shtml 以供参考。
但问题是，只要我用Chrome打开HTML文件，SVG就会显示出来，但是当我用鼠标滚轮滚动时，什么都没有发生......
我是否明白所有这些完全错误？
UPD
固定版本 http://jsfiddle.net/dfsq/GJsbD/
I'm attempting to implement a functionality in an HTML document which allows users to drag and zoom in an embedded SVG 'box'...
I found this, but soon enough realised that that script only works with plain SVG files...
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>
<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:
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.
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...
Have I understood all of this completely wrong?
UPD
Fixed version http://jsfiddle.net/dfsq/GJsbD/
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!
这篇关于SVG使用鼠标滚轮放大HTML文档的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
