JS在嵌入中获取svg对象答案

【问题标题】：JS get svg object inside embedJS在嵌入中获取svg对象
【发布时间】：2020-04-07 09:06:26
【问题描述】：

我有一些像下面这样的简单 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 标记的新文档。我可以使用document.querySelector("#demo-tiger") 选择对象标签，这似乎工作正常，但绝对无法访问其中的 svg。我试过contentDocument 和getSVGDocument() 以及我能想到的所有其他东西。他们都出现了null。

任何指导将不胜感激。

【问题讨论】：

你为什么需要访问 svg - 你到底想做什么？
@iPhoenix 很好地尝试让我在 github github.com/ariutta/svg-pan-zoom 上找到的这个“平移和缩放”代码工作，这是他们的演示文件之一
是的，但你想做什么？该库是否为您提供了处理 svg 的方法？
@iPhoenix 最终目标是显示一个可以交互的 svg，即放大/缩小和平移。 github上的代码应该正是这样做的。它适用于其他一些演示页面，但是这些演示页面直接在 html 中定义了 svg 而不是嵌入，这是不可取的
这是您要找的吗？ github.com/ariutta/svg-pan-zoom#embedding-remote-files

标签： javascript svg javascript-objects svgpanzoom

【解决方案1】：

很遗憾，如果您通过file:// 在本地加载它，这将不起作用。这是因为 contentDocument attribute 仅在两个框架（主/顶部和加载的框架）都是 SameOrigin 时才可访问，并且出于安全原因，file: uri 的规则比普通 url 更严格。你可以在这里找到更多信息：What is the Same-Origin Policy for File URIs?

【讨论】：