Question

在外域使用带有数据的SVG是否合法，即（data =“// da86ge957603k.cloudfront.net/rails/grafitti_logo-f4e8238a87c979c0cf5b41481c982b71.svg”），然后将load事件绑定到对象，然后通过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

记录here by w3c。在detail here for the object tag中，除了通过CORS之外，您无法跨域访问<object>标记的数据。

有一个more readable distillation on MDN并且要绕过它，你需要在远程站点上enable CORS（如果可以的话）。

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

1 个答案: