使用 xlink (Chrome) 加载 svg 图像

Question

谁能帮我弄清楚为什么第一张图片无法在 Chrome 中加载？在 Firefox 和 Safari 中测试，都很好。

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

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

第二个使用绝对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/en-US/docs/Web/API/Element.setAttributeNS

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