1

我有一些像下面这样的简单 html，我需要在 JS 脚本中访问 SVG 对象，而我的时间很糟糕。

<!DOCTYPE html>
<html>

  <head>
    <script src="../dist/svg-pan-zoom.js"></script>
  </head>

  <body>
    <h1>Demo for svg-pan-zoom: SVG in HTML 'object' element</h1>
    <object id="demo-tiger" type="image/svg+xml" data="tiger.svg" style="width: 500px; height: 500px; border:1px solid black; ">Your browser does not support SVG</object>

    <script>
      // Don't use window.onLoad like this in production, because it can only listen to one function.
      window.onload = function() {
        svgPanZoom('#demo-tiger', {
          zoomEnabled: true,
          controlIconsEnabled: true
        });
      };
    </script>

  </body>

</html>

加载此页面后，会出现一个新文档，其中svg包含object. 我可以用 选择对象标签document.querySelector("#demo-tiger")，这似乎工作正常，但绝对无法访问其中的 svg。我试过了contentDocument，getSVGDocument()还有我能想到的一切。他们都出现了null。

任何指导将不胜感激。

4

1 回答 1

2

不幸的是，如果您通过本地加载它，这将不起作用file://。这是因为该contentDocument属性仅在两个框架（主/顶部和加载的框架）都存在时才可访问，并且出于安全原因，uri 的SameOrigin规则file:比普通 url 更严格。您可以在此处找到更多信息：什么是文件 URI 的同源策略？

于 2019-12-14T00:18:13.170 回答