需要什么跨浏览器css switch image/animated logo

Question

基本上我有一个动画 svg 徽标，它在除 Edge 之外的所有浏览器中都能很好地工作，所以想知道是否有办法在 Edge 上查看时将其更改为静态 svg，或者是否有人有 Edge 修复程序动画 svg?

对所有这一切都很陌生，并使用动画 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                       
    }
?>

需要什么跨浏览器css switch image/animated logo

What cross browser css do I need to switch image/animated logo

css

svg

image

cross-browser