通过Javascript访问嵌入式SVG

我有一个SVG文档，我使用

标记将它放在HTML文件中。我希望使用Javascript访问文档，然后将文档中的元素链接到Javascript事件处理程序。这是我的密码：

HTML:

---

我遇到的问题是svgDoc的计算结果总是未定义的。我尝试过使用不同的方法，例如

getSVGDocument（）

来访问嵌入的文档对象，但没有效果。我在这里遗漏了什么？

您正在打开运行本地web服务的.html文件吗？ 否则，浏览器将引发安全异常，无法访问SVG文档

您可以使用node或python启动本地web服务

要用python启动本地web服务，可以从文件路径运行：

python -m SimpleHTTPServer

---

然后在浏览器中从以下位置打开它：

我不认为SVG对象（如果嵌入）实际上是当前DOM的一部分。您可能需要

元素。如果需要从另一个文件获取其内容，可以将其嵌入服务器端，或者需要使用XMLHttpRequest（“ajax”）打开该文件

---

另外，一定要熟悉名称空间，因为SVG元素位于HTML元素之外的另一个名称空间中。这可以帮你省去一些头痛：）

在定义svgDoc之前，你不能使用它。您在一定程度上做了正确的事情，但是您还必须将其余的初始化放在加载事件处理程序中

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);

---

这一点，再加上保罗·勒博的回答，为我解决了这个问题。谢谢我尝试了这个方法，结果成功了，但我不得不使用getSVGDocument（）而不是contentDocument。我还必须按照@lessmore的建议设置本地Web服务器。要跨浏览器工作，您需要同时使用这两种浏览器。首先尝试

contentDocument

，对于不支持

contentDocument

的浏览器，请返回到

getSVGDocument（）

。我将尝试此操作。不过，contentDocument似乎不能与嵌入标记一起使用。

python -m SimpleHTTPServer

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);