JS在嵌入中获取svg对象

Question

我有一些简单的 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>

此页面加载后，object 中会出现一个带有 svg 标记的新文档。我可以 select 带有 document.querySelector("#demo-tiger") 的对象标签，这似乎工作正常，但绝对无法访问其中的 svg。我已经尝试了 contentDocument 和 getSVGDocument() 以及我能想到的所有其他方法。他们都出现了null。

任何指导将不胜感激。

Answer 1

不幸的是，如果您通过 file:// 在本地加载它，这将不起作用。这是因为 contentDocument attribute is only accessible when both frames (main/top and the loaded one) are SameOrigin and the rules for file: uri's are stricter than normal urls for security reasons. You can find more information on this here:

JS在嵌入中获取svg对象

JS get svg object inside embed

javascript

svg

javascript-objects

svgpanzoom