從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函數

回答

相關問題