使用object标签嵌入跨域SVG内容文档
P粉393030917
P粉393030917 2023-10-31 18:04:21
0
1
942

拥有一个包含外部域数据的 SVG 是否“合法”,即 (data="//da86ge957603k.cloudfront.net/rails/grafitti_logo-f4e8238a87c979c0cf5b41481c982b71.svg"),然后将加载事件绑定到对象,然后通过 contentdocument 属性访问该对象的 SVG DOM?当 SVG 位于本地域时,我可以执行此操作,但每当我尝试在其他地方托管 SVG 时,我都会收到“this.contentDocument 为空”错误。我也尝试过 getSVGDocument() 。我找不到任何地方说这是一个跨域安全问题,据我所知,对于用于 SVG 的对象标签来说,这应该是允许的(我没有使用 iFrame)。我很感谢您抽出时间来帮助我。下面是我用来嵌入对象和绑定并尝试访问 DOM 的代码(正如我所说,当 SVG 位于本地域时,这会起作用)。

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


P粉393030917
P粉393030917

全部回复(1)
P粉466643318

w3c 对此进行了记录。在此处了解对象标签的详细信息 除非通过 CORS,否则您无法跨域访问 标记的数据。

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

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板