对象标签中的跨域 SVG 内容文档

Question

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

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

$("#gangstergraffiti").each(function() {
  this.addEventListener('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 之外，您不能对<object>标签的数据进行跨域访问。

MDN 上有一个更具可读性的蒸馏，要绕过它，您需要在远程站点上启用 CORS （如果可以的话）。