Question

我有一个SVG文档，我已使用<embed>标记放入我的HTML文件中。我想使用Javascript访问该文档，然后将文档中的元素链接到javascript事件处理程序。这是我的代码：

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()之类的不同方法来访问嵌入式文档对象，但无济于事。我在这里缺少什么？

Answer 1

您是否打开运行本地网络服务的.html？否则，浏览器将引发安全性异常，并且不会访问SVG文档。

您可以使用ie node或python启动本地Web服务。

要在python中启动本地Web服务，您可以从文件路径运行：

python -m SimpleHTTPServer

然后在浏览器中打开它：http://localhost:8000

Answer 2

在定义之前，您无法使用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);

Answer 3

我不认为SVG对象（如果嵌入）实际上是当前DOM的一部分。您可能需要<svg />元素。如果你需要从另一个文件中获取它的内容，你可以将它嵌入服务器端，或者你需要使用XMLHttpRequest（“ajax”）打开文件。

此外，请务必熟悉命名空间，因为SVG元素位于除HTML元素之外的另一个命名空间中。这可以为你节省一些头痛：）

通过Javascript访问嵌入式SVG

3 个答案: