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

Question

让SVG具有外部域中的数据(即(data="//da86ge957603k.cloudfront.net/rails/grafitti_logo-f4e8238a87c979c0cf5b41481c982b71.svg")，)，然后将加载事件绑定到对象，然后通过contentdocument属性访问对象的SVG，这是合法的吗？当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.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 (如果可以的话)。