使用XLink（Chrome）加载SVG图像

Question

谁能帮我找出为什么第一张图片无法在Chrome中加载的原因？ 经过Firefox和Safari的测试，都不错。

我创建了2个iframe，其中一个加载了动态生成的svg图像，其中包含与协议无关的网址：

img1.setAttributeNS('http://www.w3.org/1999/xlink', 'href', url);

第二个使用绝对网址。

img2.setAttributeNS('http://www.w3.org/1999/xlink', 'href', 'http:'+url);

Chrome为什么不想要加载第一张图片？

演示在这里：

http://jsfiddle.net/ioowilly/QbA2T/

Answer 1

根据其在Chrome中的工作方式更改代码

img1.setAttributeNS('http://www.w3.org/1999/xlink', 'href', 'http:'+url);

Answer 2

尝试这个：

http://jsfiddle.net/QbA2T/1/

img1.setAttributeNS('http://www.w3.org/1999/xlink', 'href', 'http:'+url);

您从第一张图片中省略了“ http”和url。

编辑：

问题在于，如果没有http，则无法计算字符串，最后一个值是字符串：

 value is the desired string value of the new attribute.

https://developer.mozilla.org/zh-CN/docs/Web/API/Element.setAttributeNS

它将被添加到您的元素中，但没有任何效果。