IE Edge：SVG <use> 相对路径不起作用答案

【问题标题】：IE Edge: SVG <use> relative path does not workIE Edge：SVG <use> 相对路径不起作用
【发布时间】：2019-04-25 00:46:15
【问题描述】：

在 Internet Explorer Edge 的 iFrame 中使用 SVG 时遇到问题：相对路径被转换为绝对路径，以父网站为基础。

这是一个简单的例子：

父网站：

<html>
    <body>
        <iframe src="./js/index.html" frameborder="0"></iframe>
    </body>
</html>

Iframe (js/index.html)：

<html>
    <body>
        <svg>
            <use xlink:href="./img1/icons1.svg#icon-view-close"></use>
        </svg>
        <img src="./img1/image1.jpg" alt="">
    </body>
</html>

网络调试器：

在网络调试器中，Edge 请求的是“http://localhost:5500/img1/icons1.svg”，而不是请求“http://localhost:5500/js/img1/icons1.svg”。

这个问题似乎只影响 SVG 的使用，因为 JPG 图像的路径被正确解释：“http://localhost:5500/js/img1/image1.jpg”

注意：我尝试将已弃用的 xlink:href 转换为简单的 href，但它并没有改变任何东西。

它在我们测试的所有其他浏览器中都能正常工作：Chrome、FF 甚至 IE 11，因为我们使用 JS 库 https://github.com/Keyamoon/svgxuse

（我在 Windows 10 上使用 Microsoft Edge 41.16299.785.0。）

我非常感谢您对此事的任何意见！提前感谢您的时间:)

【问题讨论】：

标签： internet-explorer svg iframe

【解决方案1】：

如果其他人遇到同样的问题：我发现除了使用另一个外部库之外没有其他方法可以解决这个问题：SVG4Everybody 似乎可以解决 Edge，SVG 现在每次都能正确加载。

【讨论】：