{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 Root（大扎） 的问题《SVG zoom with mouse wheel inside HTML document》','https://www.manongdao.com/q-626012.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
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!
Usually, it's not a great idea to implement this stuff with bare 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. 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. Check out the source and give it a try!