Benamkan dokumen kandungan SVG merentas domain menggunakan teg objek

Question

Adakah "sah" mempunyai SVG yang mengandungi data daripada domain luaran, iaitu (data="//da86ge957603k.cloudfront.net/rails/grafitti_logo-f4e8238a87c979c0cf5b41481c982b71.svg dan kemudiannya ke objek dan") kemudian lulus atribut contentdocument Akses SVG DOM objek ini? Saya boleh melakukan ini apabila SVG berada pada domain tempatan, tetapi apabila saya cuba untuk mengehoskan SVG di tempat lain, saya mendapat ralat "this.contentDocument is empty". Saya juga telah mencuba getSVGDocument() . Saya tidak dapat mencari di mana-mana yang mengatakan ini adalah isu keselamatan silang asal, dan setakat yang saya tahu ini harus dibenarkan untuk teg objek yang digunakan dalam SVG (saya tidak menggunakan iFrame). Saya menghargai anda meluangkan masa untuk membantu saya. Di bawah ialah kod yang saya gunakan untuk membenamkan objek dan mengikat dan cuba mengakses DOM (seperti yang saya katakan, ini berfungsi apabila SVG berada dalam domain tempatan).

<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 mendokumentasikan ini. Ketahui lebih lanjut tentang teg objek di sini Anda tidak boleh mengakses data teg merentas domain kecuali melalui CORS.

Terdapat pemurnian yang lebih mudah dibaca pada MDNUntuk membetulkannya, anda perlu dayakan CORS

di tapak terpencil (jika boleh). 🎜