通過Javascript訪問嵌入式SVG

我有一個SVG文檔，我使用<embed>標籤將其放置在HTML文件中。我想使用Javascript訪問文檔，然後將文檔中的元素鏈接到JavaScript事件處理程序。這裏是我的代碼：通過Javascript訪問嵌入式SVG

HTML：

<!DOCTYPE html> 
<html> 
    <head> 
    <link rel="stylesheet" type="text/css" href="home.css"> 
    </head> 

    <body> 
    <embed id="embed" src="resources/Home.svg" style="width:100%;height:100%;position:fixed;top:0;left:0;bottom:0;right:0;"/> 
    </body> 
    <script src="MapInteractivity.js"></script> 
</html>

的Javascript：

var svgObject = document.getElementById('embed'); 
var svgDoc 

svgObject.addEventListener("load",function() { 
     svgDoc = svgObject.contentDocument; 
     alert("SVG contentDocument Loaded!"); 
}, false); 
var maryland = svgDoc.getElementById("Maryland"); 

maryland.addEventListener("mouseenter", function(event) { 
    event.target.style.color = "purple"; 

    setTimeout(function() { 
    event.target.style.color = ""; 
    }, 500); 
}, false);

問題是我遇到的是svgDoc始終計算爲未定義。我嘗試過使用不同的方法，如getSVGDocument()來訪問嵌入式文檔對象，但無濟於事。我在這裏錯過了什麼？

來源

2015-05-28 Danny

您打開運行本地Web服務的.html文件嗎？否則，瀏覽器將引發安全異常，並且不會訪問SVG文檔。

您可以使用node或python啓動本地Web服務。

要啓動本地Web服務在Python你可以從你的文件路徑運行：

python -m SimpleHTTPServer

然後從瀏覽器中打開：http://localhost:8000

來源

2015-05-28 20:33:15 lessmore

這與Paul LeBeau的答案一起，爲我解決了這個問題。謝謝！ – Danny

我不認爲SVG對象，如果嵌入式，實際上是當前DOM的一部分。您可能需要<svg />元素。如果您需要從其他文件中獲取內容，可以將其嵌入到服務器端，也可以使用XMLHttpRequest（「ajax」）打開文件。

此外，請務必熟悉命名空間，因爲SVG元素位於HTML元素之外的另一個命名空間中。這可以爲您節省一些頭痛:)

來源

2015-05-28 20:51:38

您不能使用svgDoc，直到它被定義。你部分地做了正確的事情，但你必須將其餘的初始化放在load事件處理程序中。

svgObject.addEventListener("load",function() { 

     svgDoc = svgObject.contentDocument; 
     alert("SVG contentDocument Loaded!"); 

     var maryland = svgDoc.getElementById("Maryland"); 

     maryland.addEventListener("mouseenter", function(event) { 
      event.target.style.color = "purple"; 

     setTimeout(function() { 
      event.target.style.color = ""; 
     }, 500); 
     }, false); 

}, false);

來源

2015-05-28 21:38:43

我試過這個，它工作，但我不得不使用getSVGDocument（），而不是contentDocument。我還必須按照@lessmore的建議設置本地網絡服務器。 – Danny

要使用跨瀏覽器，您需要同時使用兩者。首先嚐試'contentDocument'，然後回到不支持'contentDocument'的瀏覽器的'getSVGDocument（）'。 –

我會試試這個。看來contentDocument不能和嵌入標籤一起工作。 – Danny

通過Javascript訪問嵌入式SVG

回答

相關問題