IE9 导入内联 SVG <image> 元素损坏答案

【问题标题】：IE9 importing inline SVG <image> elements brokenIE9 导入内联 SVG <image> 元素损坏
【发布时间】：2013-01-13 15:36:00
【问题描述】：

我正在使用this method 将 SVG 文档导入页面，它运行良好，但在 IE9 中，<image> 标记在导入后都不起作用（它们显示为损坏的图像，即使它们xlink:href 属性是正确的）。为什么会发生这种情况，有什么办法可以解决吗？这是一个简单的test page。它在 Chrome、FF 等中运行良好，但在 IE9 中运行良好。

【问题讨论】：

标签： javascript svg internet-explorer-9

【解决方案1】：

this answer中提供的importNode的js实现没有正确设置命名空间属性，应该使用setAttributeNS正确设置xlink:href。这个other implementation of importNode 似乎可以解决这个问题，你试过用那个来代替吗？

【讨论】：

我确实试过了，但它给了SCRIPT5022: DOM Exception: NAMESPACE_ERR (14)在线clone.setAttributeNS(a.namespaceURI,a.nodeName,a.nodeValue);。
我猜这与 xmlns:xlink 属性有关？或者是任何前缀属性？
似乎所有前缀属性都会发生这种情况。
经过进一步检查，似乎只在实际的<svg> 元素上抛出该错误，具有以下属性：xmlns="http://www.w3.org/2000/svg" 和xmlns:xlink="http://www.w3.org/1999/xlink"。如果我将该行包装在 try...catch 块中（在 catch 上什么都不做），它似乎可以很好地导入文档。
我接受你的回答，因为我认为你是正确的。不过，我仍然对为什么这些属性会导致命名空间错误感到困惑。

【解决方案2】：

显然，如果我放弃 xlink: 并只使用 href，如果在 IE9 中修复了问题，但在 Chrome 等中破坏了它。奇怪！如果有人知道原因，我很乐意接受您的回答。见test 2。

添加 href，除了 xlink:href 解决所有问题。

【讨论】：

感谢您添加 real 修复程序！它也对我有用...<svg><use ng-attr-xlink:href="{{expression}}" xlink:href="" ng-attr-href="{{expression}}"></svg>