javascript 缩放和平移 svg
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23635949/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Zooming and Panning svg
提问by zombi_man
I am trying to create an interactive map of floors of the building. And i use svg map.
我正在尝试创建建筑物楼层的交互式地图。我使用 svg 地图。
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>.
我尝试像这个例子一样缩放它：http: //timmywil.github.io/jquery.panzoom/在这个例子中 svg 地图导入标签<img src="some.svg">，并且工作正常。但是，我想在这个 svg 上通过 id 引用元素，为此我必须将 svg 文件导入为<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.
但是在那之后缩放不起作用（（我知道 Raphael 和 svgpan，但是很难理解，我认为它们对于这个小任务来说非常重要。
采纳答案by zombi_man
Thank everyone for help!
Francis, thank you for Ariutta svgPanZoomplugin, it works great for me!
I am load my svg map with <embed>tag, and i can use svg dom like this:
感谢大家的帮助！弗朗西斯，谢谢你的Ariutta svgPanZoom插件，它对我很有用！我正在用<embed>标签加载我的 svg 地图，我可以像这样使用 svg dom：
$(window).load(function(){
var svg = document.getElementById("chart").getSVGDocument();
});
$(window).load(function(){
var svg = document.getElementById("chart").getSVGDocument();
});
回答by Francis Hemsher
If you want access to your svg elements, then the best way would be to load your svg file inlineusing xmlHTTPRequestto place the response text into a DIV's innerHTML. See example below.
如果您想访问您的 svg 元素，那么最好的方法是加载您的 svg 文件inline，xmlHTTPRequest用于将响应文本放入 DIV 的innerHTML. 请参阅下面的示例。
As for zoom/pan, I have recently tested Ariutta svgPanZoomand find it has a nice mousewheel zoom. It is compact.
至于缩放/平移，我最近测试了 Ariutta svgPanZoom，发现它具有不错的鼠标滚轮缩放功能。它很紧凑。
<!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>
