内置SVG css动画不工作于Safari

Question

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

  <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>

这是我所使用的CSS，用于在除Safari之外的所有浏览器上实现所需的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;}
  }

增长分隔器动画工作完美，另一个不相关的动画也在不同的页面上完美地工作。我唯一不能在Safari上工作的是增长按钮动画。是的，Safari，总的来说，我已经对过去5年中生产的每一个版本进行了反复测试，它所做的事情完全一样

一开始我以为是CSS命名问题..。没有，为了兼容，我尝试了多个CSS实现，但都没有效果。我当时以为它只是Safari，可能是，但为什么我的其他CSS动画工作呢？我甚至通过JS将我的CSS放在新生成的元素上，它不起作用。我甚至在JQuery中使用异步编程来确保在<i>更改为<svg>之前没有应用CSS。值得一提的是，原始<i>元素上的CSS类是从字体可怕的字体注入到新的<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>，没有做一些掩蔽魔术在我的按钮。我不想那样做，因为那样会切断大量的火锅功能，而且需要更多的时间.因此，在此期间，我关闭了Safari用户的动画，这是可悲的，因为我想要这个动画，它是令人难以置信的满意，我真的不想把我自己的蒙面SVGs，并把他们放在一个<img>，只是为了我可以运行CSS动画在SVGs上.我是说..。这就是我要做的吗？

我可以将内联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>

Answer 1

哇.希望这能帮到某人..。

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

字体大小的可用于在除Safari以外的所有浏览器上扩展内联SVGs。

@-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动画中使用transform: scale()而不是字体大小：()px，以最大限度地实现兼容性。