的getElementById可以decend到SVG文檔？

我試圖通過操縱SVG文檔以賺取一些JavaScript。我有以下代碼：的getElementById可以decend到SVG文檔？

<?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"> 
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" height="24" width="400" id="tmcBarLoading">  
    <rect id="outerrect" width="400" height="24" x="0" y="0" style="stroke-width:2px;stroke:grey;fill:none;"/> 
    <rect id="innerrect" x="2" y ="2" width="0" height="20" style="stroke-width:0px;" fill="blue"> 
     <animate attributeName="width" attributeType="XML" begin="0s" dur="2s" fill="freeze" from="0" to="396"/> 
    </rect> 
</svg>

，並試圖建立在單擊SVG文檔中的元素時，一個簡單的警告：

$(document).ready(function() { 
    'use strict'; 

    var img = document.getElementById("spikeroad"); 
     console.log(img); 
    var delta = img.getElementById("outerrect"); 
     delta.addEventListener("click", function() { 
      alert('Delta clicked'); 
     }, false); 
});

該腳本可以找到IMG不夠好，但隨後未能在點擊時將警報附加到他的圖像上。我希望能夠使用JavaScript將動畫事件動態地附加到對象，但我需要先弄清楚如何識別它們。

這都坐在這個網站：

<html> 
    <head> 
     <title>My Title</title> 
     <meta charset="utf-8"> 
     <script defer="defer" src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
     <script defer="defer" src="controls.js" type="text/javascript"></script> 
    </head> 
    <body> 
     <img id="spikeroad" src="map.svg" alt="loadbarspike"/> 
    </body> 
</html>

來源

2013-05-30 Hyposaurus

的outerrect是SVG文檔中。記錄顯示，這是空當一個調用的document.getElementById – Hyposaurus

請參閱本 - http://stackoverflow.com/questions/2753732/how-to-access-svg-elements-with-javascript – lifetimes

我覺得你應該把你的JavaScript爲SVG文件。 img.getElementById不是函數也。 getElementById僅適用於文檔。

<?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"> 
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" height="24" width="400" id="tmcBarLoading"> 

<script> 
    window.onload = function() { 
    var delta = document.getElementById("outerrect"); 
    delta.addEventListener("click", function() { 
      alert('Delta clicked'); 
    }, false); 
    }; 
</script>  
<rect id="outerrect" width="400" height="24" x="0" y="0" style="stroke-width:2px;stroke:grey;fill:none;"/> 
<rect id="innerrect" x="2" y ="2" width="0" height="20" style="stroke-width:0px;" fill="blue"> 
    <animate attributeName="width" attributeType="XML" begin="0s" dur="2s" fill="freeze" from="0" to="396"/> 
</rect>

來源

2013-05-30 08:01:16 yavuzkavus

Firsty你不能做到這一點，如果您使用的<img>元素，因爲它們不能使用JavaScript操作。交換<object>元素。

然後，你需要的文件調用的getElementById上，你可以得到通過調用contentDocument的<object>元素嵌入在<object>標記該文檔。如果你靶向過時的Adobe插件IE < 9那麼它不支持contentDocument，你必須調用getSVGDocument（）代替。這爲我們提供了這樣的事情......

function init() { 
    'use strict'; 

    var img = document.getElementById("spikeroad"); 
    console.log(img); 

    var svgdoc; 
    if (object && object.contentDocument) 
     svgdoc = object.contentDocument; 
    else try { 
     svgdoc = object.getSVGDocument(); 
    } 

    var delta = svgdoc.getElementById("outerrect"); 
    delta.addEventListener("click", function() { 
     alert('Delta clicked'); 
    }, false); 
});

然後在你的身體標記寫

<body onload="init()">

來源

2013-05-30 08:57:15

的getElementById可以decend到SVG文檔？

回答

相關問題