使用object标签嵌入跨域SVG内容文档

Question

拥有一个包含外部域数据的 SVG 是否“合法”，即 (data="//da86ge957603k.cloudfront.net/rails/grafitti_logo-f4e8238a87c979c0cf5b41481c982b71.svg")，然后将加载事件绑定到对象，然后通过 contentdocument 属性访问该对象的 SVG DOM？当 SVG 位于本地域时，我可以执行此操作，但每当我尝试在其他地方托管 SVG 时，我都会收到“this.contentDocument 为空”错误。我也尝试过 getSVGDocument() 。我找不到任何地方说这是一个跨域安全问题，据我所知，对于用于 SVG 的对象标签来说，这应该是允许的（我没有使用 iFrame）。我很感谢您抽出时间来帮助我。下面是我用来嵌入对象和绑定并尝试访问 DOM 的代码（正如我所说，当 SVG 位于本地域时，这会起作用）。

<object id="gangstergraffiti" type="image/svg+xml" data="<%= image_url("grafitti_logo.svg") %>">Gangster</object>

$("#gangstergraffiti").each(function() {
  this.addEventLi stener('load', svgGangsterGraffitiReady, false);
});

function svgGangsterGraffitiReady(){
  var graffitistrokes = this.contentDocument.getElementsByClassName('graffiti');
  for (var i = 0; i < graffitistrokes.length; i++) {
    graffitistrokes[i].setAttribute("stroke", "white");
    graffitistrokes[i].setAttribute("fill", "white");
  }
}

Answer 1

w3c 对此进行了记录。在此处了解对象标签的详细信息 除非通过 CORS，否则您无法跨域访问 标记的数据。

MDN 上有一个更具可读性的精炼要解决这个问题，您需要在远程站点上启用 CORS （如果可以的话）。