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

【问题标题】：Custom HTML Embedded SVG animation not working in IE 11?自定义 HTML 嵌入式 SVG 动画在 IE 11 中不起作用？
【发布时间】：2023-03-21 06:06:01
【问题描述】：

我正在使用 webflow 并将自定义 HTML SVG 动画嵌入到页面的背景中。除了 internet explorer 11 之外的所有东西都很好用。我该如何解决这个问题，以便它适用于所有浏览器？

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

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

【问题讨论】：

标签： html animation svg internet-explorer-11 webflow

【解决方案1】：

是否有办法检测用户使用的是 IE 10 还是 IE 11？它可以将动画显示为覆盖页面，但要使用波浪动画？

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

<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 文件来显示动画（波浪），将其设置为背景图像。

【讨论】：

【解决方案2】：

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

【讨论】：

好的，我想我明白了。有没有办法检测用户使用的是 IE 10 还是 IE 11，以便它可以将动画显示为覆盖页面的单个图像，否则使用波浪动画？