从SVG文件调用javascript函数
[英]calling javascript function from SVG file
问题描述
I have SVG file, it consists of multiple links. 
我有SVG文件，它包含多个链接。 Once user clicks on the link, page should display results. 用户单击链接后，页面应显示结果。
SVG file contains Different Genetic information, need to show multiple results. SVG文件包含不同的遗传信息，需要显示多个结果。
Onclick I need to invoke a JavaScript function to process the result. Onclick我需要调用JavaScript函数来处理结果。 But javascript:myfunction(); 但是javascript：myfunction（）; is not invoking when I click on SVG file. 单击SVG文件时未调用。 Kindly suggest any alternative solutions or any workaround. 请提出任何替代解决方案或解决方法。
I think question is not very clear. 我认为问题不是很清楚。 updating information 更新信息
I have SVG file. 我有SVG文件。 save it as mysvg.svg file in your system. 将其另存为mysvg.svg文件在您的系统中。
<svg>
<g id="US">
<rect x='10' y='10' fill='#000000' height='100' width='100'></rect>
</g>
<g id="CA">
<rect x='150' y='10' fill='#0000FF' height='100' width='100'></rect>
</g>
<a xlink:href="#crisp">
<rect x="10" y="10" width="164.05078125" style="fill:none; stroke:none" height="100" pointer-events="fill" />
</a>
</svg>
My HTML file. 我的HTML文件。
$(document).ready(function () {
$("a").click(function() {
alert('hi');
});
loadSVGasXML();
});
function loadSVGasXML() {
var SVGFile="myfile.svg"
var loadXML = new XMLHttpRequest();
function handler(){
var svgDiv = document.all.svgDiv;
if(loadXML.readyState == 4 && loadXML.status == 0) {
var xmlString=loadXML.responseText
svgDiv.innerHTML=xmlString
fitSVGinDiv()
}
}
if (loadXML != null) {
loadXML.open("GET", SVGFile, true);
loadXML.onreadystatechange = handler;
loadXML.send();
}
}
function fitSVGinDiv(){
var divWH=60
var mySVG=document.getElementsByTagName("svg")[0]
var bb=mySVG.getBBox()
var bbw=bb.width
var bbh=bb.height
//--use greater of bbw vs bbh--
if(bbw>=bbh)
var factor=bbw/divWH
else
var factor=bbh/divWH
var vbWH=divWH*factor
var vbX=(bbw-vbWH)/2
var vbY=(bbh-vbWH)/2
mySVG.setAttribute("viewBox",vbX+" "+vbY+" "+vbWH+" "+vbWH)
mySVG.setAttribute("width","100%")
mySVG.setAttribute("height","100%")
}
</script>
<body>
<!--<a href="#crisp"> hi </a>-->
<div id="svgDiv">
</div>
<br>
<br>
<a id="crisp"> hello</a>
</div>
</body>
</html>`
Please add more so that it looks as if long page. 请添加更多内容，使其看起来像长页面。 I want to capture onclick function of anchor tag in my svg file 我想在我的svg文件中捕获锚标记的onclick函数
1 个解决方案
解决方案1
0 已采纳 2014-02-08 16:57:30
Different things are happening here. 这里发生了不同的事情。 First the solution to your problem: 首先解决您的问题：
<script language="JavaScript" src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script language="JavaScript">
$(document).ready(function () {
loadSVGasXML();
});
function loadSVGasXML() {
var SVGFile="myfile.svg";
var loadXML = new XMLHttpRequest();
function handler(){
var svgDiv = document.getElementById("svgDiv");
if(loadXML.readyState == 4 && loadXML.status == 200) {
var xmlString=loadXML.responseText;
svgDiv.innerHTML=xmlString;
$("a").click(function() {
alert('hi');
});
fitSVGinDiv();
}
}
if (loadXML != null) {
loadXML.open("GET", SVGFile, true);
loadXML.onreadystatechange = handler;
loadXML.send();
}
}
function fitSVGinDiv(){
var divWH=60;
var mySVG=document.getElementsByTagName("svg")[0];
var bb=mySVG.getBBox();
var bbw=bb.width;
var bbh=bb.height;
//--use greater of bbw vs bbh--
if(bbw>=bbh)
var factor=bbw/divWH;
else
var factor=bbh/divWH;
var vbWH=divWH*factor;
var vbX=(bbw-vbWH)/2;
var vbY=(bbh-vbWH)/2;
mySVG.setAttribute("viewBox",vbX+" "+vbY+" "+vbWH+" "+vbWH);
mySVG.setAttribute("width","100%");
mySVG.setAttribute("height","100%");
}
</script>
<!--<a href="#crisp"> hi </a>-->
<div id="svgDiv">
</div>
<br>
<br>
<a id="crisp"> hello</a>
</div>
Now the explanation: 现在说明：
$("a").click(function() {
alert('hi');
});
What it does, more and less, is to look for all the <a> html elements that is in your web right now and bind to them the onclick event to say "hi" to everybody. 它所做的事情越来越少地是查找当前网络中的所有<a> html元素，并将它们绑定到onclick事件上以向所有人说“嗨”。
At the beging there is no svg and so there is no "a" elements and you do the binding. 在开始时，没有svg，因此没有“ a”元素，您可以进行绑定。 Then the svg is loaded by loadSVGasXML(); 然后通过loadSVGasXML();加载svg loadSVGasXML(); and the html content is changed. 并且html内容已更改。 New tags are added. 添加了新标签。 But this tags are attached to the web page after to bind the event width $("a").click(function() {alert('hi'}); and so this new onclick events haven't been binded yet. So what you need to do is to make the event bind whenever you change your web content dynamically after everything is loaded. So you need to place the binding inside the handler callback function. 但是，此标记是在绑定事件宽度$("a").click(function() {alert('hi'});之后附加到网页的，因此尚未绑定此新的onclick事件。您需要做的是在加载完所有内容后动态更改Web内容时使事件绑定，因此需要将绑定置于处理程序回调函数中。
Second you are using an old way to get the DOM. 其次，您正在使用一种旧方法来获取DOM。 document.all.svgDiv it dates from a dark times before the Roman Empire (just joking) where to develop anything related to the web was a pain in the ass. document.all.svgDiv它的产生可追溯到罗马帝国（开玩笑）之前的黑暗时期，在那里开发与网络相关的任何东西都是一个痛苦的经历。 In those wretched times every browser got's they own way to access the DOM. 在那些不幸的时期，每个浏览器都有他们自己的访问DOM的方式。 In our situation this is the way used long time ago to access the DOM object in IE. 在我们的情况下，这是很久以前用于访问IE中DOM对象的方法。 Fortunately nowadays everything have changed to better and there are better ways to access the DOM which are supported by all the browsers. 幸运的是，如今一切都变得更好了，并且有更好的方法来访问所有浏览器都支持的DOM。 If you want to access a DOM element by an id using raw javascript i suggest you to always use document.getElementById("svgDiv"); 如果您想使用原始JavaScript通过ID访问DOM元素，建议您始终使用document.getElementById("svgDiv"); . 。
Finally it comes the loadXML.status . 最后是loadXML.status 。 When the request have been successful the status is 200 not 0. 请求成功后，状态为200而不是0。
Probably those lasts you may already know it and are just a copy & paste mistake. 您可能已经知道了这些持续时间，而这仅仅是复制和粘贴错误。 Just pointing to it. 只是指向它。 Wish this may be helpful to you. 希望这对您有所帮助。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.