从SVG文件中调用javascript函数

我有SVG文件，它由多个链接组成。用户点击链接后，页面应显示结果。从SVG文件中调用javascript函数

SVG文件包含不同的遗传信息，需要显示多个结果。

Onclick我需要调用JavaScript函数来处理结果。但javascript：myfunction（）;当我点击SVG文件时没有调用。请建议任何替代解决方案或任何解决方法。

我觉得问题不是很清楚。更新信息

我有SVG文件。将它作为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>

我的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>`

请添加更多，这样看起来好像长页。我想在我的svg文件中捕获锚标记的onclick函数

来源

2014-01-30 nutim

添加一些代码。尝试使用'onclick'而不是'javascript：'URI Schema。 – Pinal

我觉得问题不是很清楚。 – nutim

您可以通过正确缩进来让您的SVG代码更具可读性吗？ –

不同的事情发生在这里。首先，解决问题的方法：

<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>

现在的解释：

$("a").click(function() { 
     alert('hi'); 
    });

它做什么，多和少，是寻找一切<a> HTML元素是在您的网页，现在和绑定他们的onclick事件向大家说“嗨”。

在beging没有svg，所以没有“a”元素，你做绑定。然后，svg由loadSVGasXML();加载，并且html内容被更改。新标签被添加。但是这个标签绑定到网页后绑定事件宽度$("a").click(function() {alert('hi'});，所以这个新的onclick事件还没有绑定。因此，您需要做的是在加载所有内容后动态更改Web内容时使事件绑定。所以你需要将绑定放到处理程序回调函数中。

其次，您正在使用旧的方式来获取DOM。 document.all.svgDiv它可以追溯到罗马帝国之前的黑暗时期（只是开玩笑），在那里开发任何与网络相关的东西都是一种痛苦的屁股。在那些可怜的时代，每个浏览器都有自己的方式来访问DOM。在我们的情况下，这是很久以前用于访问IE中的DOM对象的方式。幸运的是，现在一切都变得更好了，并且有更好的方法来访问所有浏览器支持的DOM。如果你想通过使用原始JavaScript访问DOM元素，我建议你总是使用document.getElementById("svgDiv");。最后是loadXML.status。当请求成功时，状态是200不是0.

可能那些最后你可能已经知道它并且只是一个副本&粘贴错误。只是指向它。希望这可能对你有所帮助。

来源

2014-02-08 16:57:30 user688877

从SVG文件中调用javascript函数

回答

相关问题