Question

我正在尝试在ie11中使外部svg文件工作。我知道它本身不受支持，但我决定使用svg4everybody。但是，它只是行不通。

这是一个小例子的标记：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>SVG Test</title>

    <script src="svg4everybody.js"></script>
    <script>svg4everybody();</script>
</head>

<body>
    <svg role="img" title="CodePen">
        <use xlink:href="sprite.svg#icon-twitter" />
    </svg>
</body>

</html>

还有sprite.svg：

<svg xmlns="http://www.w3.org/2000/svg">
    <defs>
        <symbol id="icon-twitter" viewBox="0 0 24 24">
            <title>twitter</title>
            <path d="M23.954 4.569c-.885.389-1.83.654-2.825.775 1.014-.611 1.794-1.574 2.163-2.723-.951.555-2.005.959-3.127 1.184-.896-.959-2.173-1.559-3.591-1.559-2.717 0-4.92 2.203-4.92 4.917 0 .39.045.765.127 1.124C7.691 8.094 4.066 6.13 1.64 3.161c-.427.722-.666 1.561-.666 2.475 0 1.71.87 3.213 2.188 4.096-.807-.026-1.566-.248-2.228-.616v.061c0 2.385 1.693 4.374 3.946 4.827-.413.111-.849.171-1.296.171-.314 0-.615-.03-.916-.086.631 1.953 2.445 3.377 4.604 3.417-1.68 1.319-3.809 2.105-6.102 2.105-.39 0-.779-.023-1.17-.067 2.189 1.394 4.768 2.209 7.557 2.209 9.054 0 13.999-7.496 13.999-13.986 0-.209 0-.42-.015-.63.961-.689 1.8-1.56 2.46-2.548l-.047-.02z"></path>
        </symbol>
    </defs>
</svg>

预期结果（Firefox）-

在IE11中-

SVG在使用svg4everybody时不会在IE11中呈现，但可以在Firefox和Chrome中使用

0 个答案: