对象标签中的跨域SVG内容文档 [英] Cross-domain SVG content document in object tag

问题描述

在外部域中使用带有数据的SVG是否合法，例如（data =// da86ge957603k.cloudfront.net/rails/grafitti_logo-f4e8238a87c979c0cf5b41481c982b71.svg），然后将加载事件绑定到对象，然后通过contentdocument属性访问对象的SVG DOM？当SVG位于本地域时，我可以做到这一点，但每当我尝试在其他地方托管SVG时，我都会得到this.contentDocument为null错误。我也尝试过getSVGDocument（）。我找不到任何说这是跨域安全问题的地方，并且从我可以告诉的是，应该允许使用用于SVG的对象标记（我没有使用iFrame）。我感谢您花时间帮助我。这里是我用来嵌入对象和绑定的代码，并尝试访问DOM（正如我所说的，当SVG在本地域上时，这是有效的）。

Is it 'legal' to have an SVG with a data in a foreign domain i.e. (data="//da86ge957603k.cloudfront.net/rails/grafitti_logo-f4e8238a87c979c0cf5b41481c982b71.svg"), and then bind a load event to the object and then access the object's SVG DOM through the contentdocument property? I can do this when the SVG is on the local domain, but whenever I try to host the SVG elsewhere, I get "this.contentDocument is null" errors. I have tried getSVGDocument() as well. I can't find anywhere that says this is a cross-domain security problem, and from what I can tell this should be permissible with an object tag being used for the SVG (I am not using an iFrame). I appreciate you taking the time to help me. Here is the code I am using to embed the object and bind, and try to access the DOM (as I said this works when the SVG is on the local domain).

 <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");
  }
}

Dan

推荐答案

>。在对象标签的详细信息，除了通过CORS之外，您无法跨域访问< object> 标记的数据。

It's documented here by w3c. In detail here for the object tag that you can't do cross domain access to the data of a <object> tag except via CORS.

有一个在MDN上更具可读性的精华，并且您需要在远程站点上启用CORS （如果可以的话）。

There's a more readable distillation on MDN and to get round it you need to enable CORS on the remote site (if you can).

这篇关于对象标签中的跨域SVG内容文档的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！