Intégrer des documents de contenu SVG inter-domaines à l'aide de la balise object

Question

Est-il "légal" d'avoir un SVG contenant des données provenant d'un domaine externe, c'est-à-dire (data="//da86ge957603k.cloudfront.net/rails/grafitti_logo-f4e8238a87c979c0cf5b41481c982b71.svg"), puis de lier l'événement de chargement à l'objet et puis passez l'attribut contentdocument Accéder au DOM SVG de cet objet ? Je peux le faire lorsque le SVG se trouve sur le domaine local, mais chaque fois que j'essaie d'héberger le SVG ailleurs, j'obtiens une erreur "this.contentDocument est vide". J'ai également essayé getSVGDocument() . Je ne trouve nulle part qui indique qu'il s'agit d'un problème de sécurité d'origine croisée, et pour autant que je sache, cela devrait être autorisé pour les balises d'objet utilisées en SVG (je n'utilise pas iFrame). J'apprécie que vous preniez le temps de m'aider. Vous trouverez ci-dessous le code que j'utilise pour intégrer l'objet et la liaison et essayer d'accéder au DOM (comme je l'ai dit, cela fonctionne lorsque le SVG est dans le domaine local).

<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 a documenté cela. Apprenez-en plus sur les balises d'objet ici Vous ne pouvez pas accéder aux données balisées sur tous les domaines, sauf via CORS.

Il existe un raffinement plus lisible sur MDNPour résoudre ce problème, vous devrez activer CORS

sur le site distant (si vous le pouvez). 🎜