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

【问题标题】：Cross-domain SVG content document in object tag对象标签中的跨域 SVG 内容文档
【发布时间】：2014-12-05 20:57:28
【问题描述】：

拥有一个包含外部域中数据的 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");
  }
}

【问题讨论】：

UA 应该防止这种情况发生。如果您控制远程站点，则可以设置 CORS 来解决此问题：developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS
感谢您的回复。看起来它正在被阻止，我只是找不到这是任何地方记录的预期行为的事实。我会给你答案的。
嗨@dps，你成功了吗？在加载资源之前，我无法强制任何浏览器进行预检请求，这似乎是我无法访问内容文档的原因。我的实现似乎和你的一样。
@Kukosk 已经有一段时间了，但我想我最终使用了 SVGInjector，它会从远程 URL 加载 SVG 并将其直接注入 DOM，看看这个：github.com/iconic/SVGInjector跨度>
@dps 是的，我的猜测也是这种方法会起作用，但如果可能的话，我会尽量避免它。可悲的是，从我读过的内容来看，我似乎无法:(我想我将不得不坚持我目前的代理实现。谢谢你的回复:)

标签： javascript html svg cross-domain

【解决方案1】：

已记录在 here by w3c。在detail here for the object tag 中，您不能跨域访问<object> 标签的数据，除非通过CORS。

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

【讨论】：

感谢您的帮助 :-)