自定义 HTML 嵌入式 SVG 动画在 IE 11 中不起作用？

Question

我正在使用 webflow 并将自定义 HTML SVG 动画嵌入到页面背景中。在除 Internet Explorer 11 之外的所有应用中都运行良好。我该如何解决这个问题，以便它在所有浏览器中运行？

我试过在页面中放入一些CSS代码来检测它是否在Internet Explorer 11中，但我对CSS不是很熟悉，它只是让波浪消失了。

https://proj-24e99d.webflow.io/

Answer 1

据我所知，IE 10 和 11 仅支持带有编程脚本的动画。希望下面的链接了解更多。 https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/samples/gg193979(v=vs.85)

Answer 2

Would there be a way to detect if a user is using IE 10 or IE 11 so that it could display the animation as a single image that covers the page, but otherwise use the wave animation?

您可以使用以下代码检测浏览器版本：

<style type="text/css">
    body {
        font: 1.25em sans-serif;
        background-color:palegreen;

    }
    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
        /* IE10+ specific styles go here */
        body{
            background-color:aqua;
        }
    }
</style>

更多详情，请查看this thread。

此外，关于 SVG 动画，作为解决方法，我认为您可以尝试使用 .GIF 文件来显示动画（波浪），将其设置为背景图像。

自定义 HTML 嵌入式 SVG 动画在 IE 11 中不起作用？

Custom HTML Embedded SVG animation not working in IE 11?

html

animation

svg

internet-explorer-11

webflow