Menu
I am trying to create an interactive map of floors of the building. And i use svg map.
I am try to zoom it like this example: http://timmywil.github.io/jquery.panzoom/
In this example svg map imported in tags <img src="some.svg">, and work fine.
But, i want to refer to elements by id on this svg, and for that i must import svg file as <object data="some.svg"></object>.
But after that zoom not working (( I know about Raphael and svgpan, but it's very hard for understanding, and i think they a very big for this small task.
484
Pan and zoom. Pan lets you move around in an image. Zoom lets you look closer (zoom in) or further away (zoom out).
Just set the viewBox on your <svg> , and set one of height or width to auto . The browser will adjust it so that the overall aspect ratio matches the viewBox .
The viewBox attribute defines the position and dimension, in user space, of an SVG viewport. The value of the viewBox attribute is a list of four numbers: min-x , min-y , width and height .
If you want access to your svg elements, then the best way would be to load your svg file inline using xmlHTTPRequest to place the response text into a DIV's innerHTML. See example below.
As for zoom/pan, I have recently tested Ariutta svgPanZoom and find it has a nice mousewheel zoom. It is compact.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Load SVG file file Inline</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body style='padding:0px;font-family:arial'>
<center><h4>Load SVG file Inline</h4>
<div style='width:90%;background-color:gainsboro;text-align:justify;padding:10px;border-radius:6px;'>
Load an svg file as inline SVG. This provides dynamic svg applications seamless DOM access to its elements. Uses <b>XMLHttpRequest</b>. It can be loaded as a DIV's <b>innerHTML</b> via a string dump (<b>responseText</b>).
</div>
<div id="svgDiv"></div>
<p><button onClick=changeSomeValues()>change</button></p>
SVG DOM:<br />
<textarea id=mySvgValue style='width:90%;height:200px;font-size:120%;font-family:lucida console;'></textarea>
<br />Javascript:<br />
<textarea id=jsValue style='border-radius:26px;font-size:110%;font-weight:bold;color:midnightblue;padding:16px;background-color:beige;border-width:0px;font-size:100%;font-family:lucida console;width:90%;height:400px'></textarea>
</center>
<div id='browserDiv' style='padding:3px;position:absolute;top:5px;left:5px;background-color:gainsboro;'></div>
<script id=myScript>
function loadSVGasXML()
{
var SVGFile="http://upload.wikimedia.org/wikipedia/en/4/4a/Commons-logo.svg"
var loadXML = new XMLHttpRequest;
function handler(){
if(loadXML.readyState == 4 &&loadXML.status == 200){
svgDiv.innerHTML=loadXML.responseText
mySvgValue.value= svgDiv.innerHTML
}
}
if (loadXML != null){
loadXML.open("GET", SVGFile, true);
loadXML.onreadystatechange = handler;
loadXML.send();
}
}
//--button---
function changeSomeValues()
{
path4653.style.fill="green"
mySvgValue.value=svgDiv.innerHTML
}
</script>
<script>
document.addEventListener("onload",init(),false)
function init()
{
loadSVGasXML()
jsValue.value=myScript.text
mySvgValue.value=svgDiv.innerHTML
}
</script>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
