вызов функции javascript из файла SVG

У меня есть файл SVG, он состоит из нескольких ссылок. Когда пользователь нажимает на ссылку, страница должна показывать результаты.вызов функции javascript из файла SVG

Файл 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.

источник

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, чтобы сказать «привет» всем.

У начальника нет svg, и поэтому нет элементов «a», и вы выполняете привязку. Затем svg загружается loadSVGasXML(); и содержимое html изменяется. Добавлены новые теги. Но эти теги прикрепляются к веб-странице после привязки ширины события $("a").click(function() {alert('hi'});, и поэтому новые события onclick еще не привязаны. Таким образом, вам нужно сделать привязку события, когда вы изменяете свой веб-контент динамически после того, как все будет загружено. Поэтому вам нужно разместить привязку внутри функции обратного вызова обработчика.

Во-вторых, вы используете старый способ получить DOM. document.all.svgDiv это датируется темными временами до Римской империи (просто шутит), где развить что-либо, связанное с паутиной, было болью в заднице. В те жалкие времена каждый браузер получил доступ к DOM. В нашей ситуации это используется давно, чтобы получить доступ к объекту DOM в IE. К счастью, в наши дни все изменилось лучше, и есть лучшие способы доступа к DOM, которые поддерживаются всеми браузерами. Если вы хотите получить доступ к элементу DOM с помощью идентификатора, используя raw javascript, я предлагаю вам всегда использовать document.getElementById("svgDiv");.

Наконец-то это loadXML.status. Когда запрос был успешным, статус не равен 200.

Возможно, это возможно, вы уже знаете это и только копия & Ошибка пасты. Просто указывая на это. Пожелайте, чтобы это было полезно для вас.

источник

2014-02-08 16:57:30 user688877

вызов функции javascript из файла SVG

ответ

Смежные вопросы