Betten Sie domänenübergreifende SVG-Inhaltsdokumente mithilfe des Objekt-Tags ein

Question

Ist es „legal“, ein SVG zu haben, das Daten von einer externen Domäne enthält, d. h. (data="//da86ge957603k.cloudfront.net/rails/grafitti_logo-f4e8238a87c979c0cf5b41481c982b71.svg"), und dann das Ladeereignis an das Objekt zu binden und Übergeben Sie dann das Attribut contentdocument. Auf das SVG-DOM dieses Objekts zugreifen? Ich kann dies tun, wenn sich die SVG-Datei in der lokalen Domäne befindet, aber wenn ich versuche, die SVG-Datei anderswo zu hosten, erhalte ich die Fehlermeldung „this.contentDocument ist leer“. Ich habe auch getSVGDocument() ausprobiert. Ich kann nirgends finden, dass es sich um ein ursprungsübergreifendes Sicherheitsproblem handelt, und soweit ich weiß, sollte dies für in SVG verwendete Objekt-Tags zulässig sein (ich verwende kein iFrame). Ich weiß es zu schätzen, dass Sie sich die Zeit genommen haben, mir zu helfen. Unten ist der Code, den ich verwende, um das Objekt und die Bindung einzubetten und zu versuchen, auf das DOM zuzugreifen (wie gesagt, das funktioniert, wenn sich die SVG in der lokalen Domäne befindet).

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

$("#gangstergraffiti").each(function() {
  this.addEventLi stener('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，否则您无法跨域访问 标记的数据。

MDN 上有一个更具可读性的精炼要解决这个问题，您需要在远程站点上启用 CORS （如果可以的话）。