内联 SVG css 动画在 Safari 上不起作用答案

【问题标题】：Inline SVG css animation not working on Safari内联 SVG css 动画在 Safari 上不起作用
【发布时间】：2021-09-01 00:20:10
【问题描述】：

我正在使用这些的最新版本：

  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384- 
  DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"> 
  </script>

  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" 
  integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" 
  crossorigin="anonymous"></script>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" 
  integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" 
  crossorigin="anonymous"></script>

这是我用来在除 Safari 之外的所有浏览器中实现所需 CSS 动画效果的 CSS。

.tt-divider {
      border-style: outset;
      border-color: LawnGreen;
      border-radius: 3px;
      margin-bottom: 2.5vh;
      margin-top: 2.5vh;
      background: gold;
      border-width: 2px;
      animation: grow-divider 2s forwards linear;
      margin: auto;
  }
  @-webkit-keyframes grow-divider{
      from {width:0%; }
      to {width:100%; }
  }
  @keyframes grow-divider{
      from {width:0%; }
      to {width:100%; }
  }
  
  #landing-logo {
      display: inline-block;
      max-width: 350px;
      min-width: 150px;
      width: 50vw;
      margin-top: 5vh;
      margin-bottom: 1vh;
  }
 #navigation{
      padding-left: 7.5vh;
      padding-right: 7.5vh;
      text-align:center;
 }
 #btm-right-nav{
     max-width: 55px;
     position: fixed;
     right: 25px;
     bottom: 10px;
 }
 .btm-right-ico {
     display: block;
     color: lawngreen;
     margin:auto;
     margin-bottom: 5vh;
     font-size: 16px;
     text-rendering: optimizeLegibility;
 }
 .fontawesome-i2svg-active .btm-right-ico {
     animation-name: grow-buttons;
     animation-duration: 2s;
     animation-timing-function: linear;
     animation-play-state: running;
     animation-fill-mode: forwards;
     animation-iteration-count: 1;
     animation-direction: normal;
 }
 @-webkit-keyframes grow-buttons{
      from {font-size:16px; }
      to {font-size: 45px; }
  }
 @keyframes grow-buttons{
      from {font-size:16px}
      to {font-size:45px;}
  }

grow-divider 动画效果很好，另一个不相关的动画在不同的页面上效果也很好。 只能在 Safari 上我唯一不能工作的是 grow-buttons 动画。 是的 Safari 总的来说，我已经对过去 5 年中制作的每个版本进行了回溯测试，它的功能完全相同..

一开始我以为是 CSS 命名问题...没有为了兼容性我尝试了多种 CSS 实现无济于事。然后我认为它只是 Safari，它可能是，但为什么我的其他 CSS 动画工作呢？我什至通过 JS 将我的 CSS 放在新生成的元素上，但它不起作用。我什至在 JQuery 中使用 async 编程来确保在 <i> 更改为 <svg> 之前未应用 CSS 值得一提的是，原来<i>元素上的CSS类是从font-awesome注入到新的<svg>中的……所以继承了CSS动画……这个逻辑适用于除Safari之外的所有浏览器…… 我完全不知道是什么原因造成的，无论如何这里是整个页面的 html：

     <!--Display none is changed to block when the page is done loading-->
     <div id="landing" style="display:none">


     <div id="navigation">
     <img id="landing-logo" src="example.gif" alt="example">
     <div class="tt-divider"></div>
    
    
     <div id="page">
        
     </div>
    
    
     <div id="btm-right-nav">
        
         <i class="fas fa-bars  btm-right-ico" data-fa-mask="fas fa-circle" data-fa- 
         transform="shrink-7"></i>
        <i class="fas fa-phone btm-right-ico" data-fa-mask="fas fa-circle" data-fa- 
          transform="shrink-7"></i>
        
      </div>
   </div>
 </div>

我想如果我只是拉出我自己的 svg 并将其整齐地放在 <img> 中并且没有在我的按钮上做一些掩蔽魔法，我想我可以让它工作。我不想这样做，因为那''''''''''''''''''''''''''''''''''''''''''''''''''''' to cut off 大量的 fontawesome 功能并花费更多时间......所以与此同时，我为 Safari 用户关闭了动画，这很可悲，因为我想要这个动画非常令人满意，我真的不想烘焙我自己的蒙面 SVG 并将它们放在 <img> 中，这样我就可以在 SVG 上运行 CSS 动画...我的意思是..这是我必须做的吗？

我可以将内联 SVG 注入 src 吗？

这是页面加载后来自 fontawesome 的烘焙 SVG 数据（我取出数据：）

   <div id="btm-right-nav">
        
        <svg class="svg-inline--fa fa-bars fa-w-16 btm-right-ico" data- 
   fa-mask="fas fa-circle" data-fa-transform="shrink-7" aria- 
   hidden="true" focusable="false" data-prefix="fas" data-icon="bars" 
  role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" 
    data-fa-i2svg=""><defs><clipPath id="clip-hzzHNtGIZRrn"><path 
   fill="currentColor" d=""></path></clipPath><mask x="0" y="0" 
 width="100%" height="100%" id="mask-jyjnVEKbKq5c" 
 maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse"><rect 
  x="0" 
 y="0" width="100%" height="100%" fill="white"></rect><g 
transform="translate(256 256)"><g transform="translate(0, 0)  
scale(0.5625, 0.5625)  rotate(0 0 0)"><path fill="black" d="" 
  transform="translate(-224 -256)"></path></g></g></mask></defs><rect 
   fill="currentColor" clip-path="url(#clip-hzzHNtGIZRrn)" 
    mask="url(#mask- 
    jyjnVEKbKq5c)" x="0" y="0" width="100%" height="100%"></rect></svg> 
    

  <!--<i class="fas fa-bars  btm-right-ico" data-fa-mask="fas fa- 
   circle" 
  data- 
 fa-transform="shrink-7"></i> Font Awesome fontawesome.com -->


        <svg class="svg-inline--fa fa-phone fa-w-16 btm-right-ico" data- 
 fa-mask="fas fa-circle" data-fa-transform="shrink-7" aria-hidden="true" 
focusable="false" data-prefix="fas" data-icon="phone" role="img" 
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa- 
 i2svg=""><defs><clipPath id="clip-YDDPIJZX3DpE"><path 
  fill="currentColor" d=""></path></clipPath><mask x="0" y="0" 
    width="100%" height="100%" id="mask-eJs29EAdXlZv" 
 maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse"><rect 
 x="0" y="0" width="100%" height="100%" fill="white"></rect><g 
 transform="translate(256 256)"><g transform="translate(0, 0)  
 scale(0.5625, 0.5625)  rotate(0 0 0)"><path fill="black" d="" 
transform="translate(-256 -256)"></path></g></g></mask></defs><rect 
  fill="currentColor" clip-path="url(#clip-YDDPIJZX3DpE)" 
  mask="url(#mask- 
 eJs29EAdXlZv)" x="0" y="0" width="100%" height="100%"> 
     </rect></svg> 
   <!--<i class="fas fa-phone btm-right-ico" data-fa- 
 mask="fas 
    fa-circle" data-fa-transform="shrink-7"></i> Font Awesome 
 fontawesome.com-->
        
 </div>

【问题讨论】：

我在您的示例中没有看到 SVG。您能否更新您的问题以包含Minimal, Reproducible Example，最好通过[<>] 按钮。
@Reyno 发布了它。

标签： javascript css animation svg font-awesome

【解决方案1】：

哇.....真的希望这对某人有帮助......

要解决这个问题，您可以使用常规的旧 css 在动画中转换缩放它。

Font-size 可用于在除 Safari

之外的所有浏览器上放大内嵌 SVG

@-webkit-keyframes grow-buttons{
      from { -webkit-transform: scale(1); transform: scale(1);}
      to { -webkit-transform: scale(3); transform: scale(3);}
  }
@keyframes grow-buttons{
      from { -webkit-transform: scale(1); transform: scale(1);}
      to { -webkit-transform: scale(3); transform: scale(3);}
  }

底线：

在 SVG CSS 动画上使用 transform: scale() 而不是 font-size: ()px 以最大限度地提高兼容性。

【讨论】：