Question

在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/js/img1/icons1.svg”而不是请求“ http://localhost:5500/img1/icons1.svg”。

该问题似乎仅影响SVG的使用，因为JPG图片的路径已正确解释：“ http://localhost:5500/js/img1/image1.jpg”

注意：我尝试将不建议使用的xlink：href转换为简单的href，但它不会改变任何内容。

当我们使用JS库https://github.com/Keyamoon/svgxuse

时，它在我们测试过的所有其他浏览器中都能正常工作：Chrome，FF甚至IE 11

（我在Windows 10上使用的是Microsoft Edge 41.16299.785.0；）

在此问题上，我将不胜感激！预先感谢您的时间：）

Answer 1

万一其他人遇到相同的问题：除了使用其他外部库，我发现没有其他方法可以解决此问题：SVG4Everybody似乎可以解决Edge问题，现在SVG每次都可以正确加载。 >

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

1 个答案: