1. 首頁
  2. 問答
  3. 「的onclick」事件

「的onclick」事件

2014-01-14 149 views
-1

這是我的SVG文件中的代碼「的onclick」事件

<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<!-- Creator: CorelDRAW X6 --> 
<?xml-stylesheet href="style.css" type="text/css"?> 
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="1176px" height="617px" version="1.1" style="shape-rendering:geometricPrecision; text- rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip- rule:evenodd" 
viewBox="0 0 1176 617" 
xmlns:xlink="http://www.w3.org/1999/xlink"> 
<script xlink:href="skrypty.js" type="text/ecmascript"/> 
<defs> 
<clipPath id="id0"> 
<rect x="2" y="1" width="1176" height="617"/> 
</clipPath> 
</defs> 
<g id="Layer_x0020_1"> 
<metadata id="CorelCorpID_0Corel-Layer"/> 
<g style="clip-path:url(#id0)"> 
<image id="mainMapa.jpg" x="2" y="1" width="1176" height="617" xlink:href="mapaMain_Images\mapaMain_ImgID1.png"/> 
</g> 
<polygon id="fil0" class="str0" onclick="changeColor()" points="638,226 638,269 686,269 670,242 675,242 677,237 673,229 669,229 663,228 660,228 655,229 647,228 "/> 
</g> 
</svg>

，這裏是JavaScript代碼

var worldMap = document.getElementById("mapaSwiata").getSVGDocument(); 
worldMap.getElementById("fil0"); 

function changeColor() 
{ 
worldMap.style.fill="brown"; 
}

我的目的是調用javascript函數，當有人點擊在外部SVG文件中的多邊形上。鏈接beetwen外部CSS文件和外部SVG文件完美工作，但我不知道如何連接外部JavaScript文件與SVG文件。
有什麼想法？

來源

2014-01-14 Shagohad

+0

這不是從你的問題，你是如何包括SVG文件和腳本清晰。這對解決方案很重要。 –

+0

我使用來包含svg文件「」，並且包含我使用。沒什麼特別的。 – Shagohad

回答

2

不要在html/svg中使用「onclick」，請不要使用它！ 開始一個eventlistener。

var el = document.getElementById('fil0'); 

el.addEventListener('click', function(){ 
    this.style.fill="brown"; 
}, false);

工作示例：http://jsbin.com/oVoPECIm/1/edit

來源

2014-01-14 13:18:42 pictus

+0

好吧，我同意eventlistener是更好的選擇，但仍然沒有解決問題：如何從JavaScript使用svg文件獲取id？ – Shagohad

+0

您必須定義ID，或者您可以使用獲取ElementsByTagName（'polygon'）; – pictus

+0

我會嘗試使用「getElementsByTagName」，但是你的意思是「你必須定義id」？ – Shagohad

0

SVG的被稱爲成<object>，但你的JavaScript中的父存在。在對象中調用的函數必須要求父函數。有沒有任何理由你不能在線調用svg？它會簡化事情。

如果您有HTML5文檔，加載svg內聯的最簡單方法是創建一個與svg文件具有相同寬度/高度的DIV。然後，由於SVG是XML，使用XMLHttpRequest的如下：

//---html on load--- 
document.addEventListener("onload",loadSVG(),false) 
function loadSVG() 
{ 
    var SVGFile="mySvgFile.svg" 
    var loadXML = new XMLHttpRequest; 
    function handler() 
    { 
     if(loadXML.readyState == 4) 
     { 
      if (loadXML.status == 200) //---loaded ok--- 
      { 
       //---responseText--- 
       var xmlString=loadXML.responseText 
       mySVGDiv.innerHTML=xmlString 
      } 
     } 
    } 
    if (loadXML != null) 
    { 
     loadXML.open("GET", SVGFile, true); 
     loadXML.onreadystatechange = handler; 
     loadXML.send(); 
    } 
}

來源

2014-01-14 20:12:39

+0

當我把代碼從svg到html，一切工作正常。但是當我完成我的地圖時，會有很多代碼行。我真的不想那樣做，我更喜歡保留在外部文件中的代碼.. – Shagohad

相關問題

 相關問題