要切换图像/动画徽标，我需要哪些跨浏览器css

Question

基本上我有一个动画svg徽标，除了Edge之外，它在所有浏览器中都工作得很好，所以我想知道是否有一种方法可以在Edge上查看时将其更改为静态svg，或者是否有人有针对动画svg的Edge修复？

我对所有这些都很陌生，并使用了一个动画svg生成器来生成svg，但我不知道解决这个问题的最好方法是什么。

<div class="logo">
<div class="custom">
<p>
<a href="/">
<img src="/img/ethos-tech-animated-logo.svg" alt="" class="l-black">
<img src="/img/ethos-tech-animated-logo-white.svg" alt="" class="l-white">
<img src="/img/ethos-tech-animated-logo.svg" alt="" class="l-color">
</a>
</p>
</div>
</div>

这是主徽标，当前结果可在此处找到：https://ethostec.net/

Answer 1

这可以通过使用JS或PHP简单地完成：

JS：

<script>
    if (/Edge/.test(navigator.userAgent)) {
        //It's Edge and you have to show the static logo
    }
</script>

PHP：

<?php
    if (preg_match('/Edge/i', $_SERVER['HTTP_USER_AGENT'])) {
        //It's Edge and you have to show the static logo
    }
?>

Answer 2

<?php
    if (preg_match('/Edge/i', $_SERVER['HTTP_USER_AGENT'])) {
?>
    //Static version of logo
<?php
    }else{
?>
    //Animated version of logo
<?php                       
    }
?>