SVG动画在Safari上无法运行

Question

我们正在开发一个使用SVG动画的Web应用程序（React）。我们的SVG动画在桌面Web和Android Web上运行良好，但在iOS设备上无法播放动画（在iPhone 5s、8和MacBook Pro上测试了Safari浏览器）。

const AnimationFooter = styled.div`
  margin-top: -18rem;
  height: auto;
  width: 100%;
  position: relative;

  @media (max-width: 420px) {
    margin-top: -15rem;
  }
  @media (max-width: 360px) {
    margin-top: -14rem;
  }
`;


const Im = styled.img`
  width: 100%;
  height: auto;
  /* -webkit-transform: translateZ(0); */

  @media (max-width: 420px) {
    margin-top: 6px;
  }
`;



<div>
   <AnimationFooter>
            <Im src="../static/images/home-image-ground.svg" />
     </AnimationFooter>
</div>

- Mithila Eranda

Answer 1

尝试用这种方式。

 const PetTabs = styled.div`
     .react-tabs__tab {
       width: 250px;
       margin-left: 40px;
       margin-right: -40px;
       border-color: #454440;
       border-width: 1px 1px 1px 1px;
       border-radius: 15px 15px 0 0;
       background-color: #454440;
       color: #ffffff;
     }

     .react-tabs__tab--selected {
       background-color: #ffffff;
       color: #454440;
     }

     .react-tabs__tab--selected :before,
     .react-tabs__tab--selected :after {
       position: absolute;
       bottom: -1px;
       width: 16px;
       height: 19px;
       content: ' ';
     }

     .react-tabs__tab--selected :after,
     .react-tabs__tab--selected :before {
       border: 1px solid #454440;
     }
     .react-tabs__tab--selected :before {
       left: -17px;
       margin-bottom: 1px;
       border-bottom-right-radius: 16px;
       border-width: 0 1px 1px 0;
       box-shadow: 7px 9px 0 #ffffff;
     }
     .react-tabs__tab--selected :after {
       right: -17px;
       margin-bottom: 1px;
       border-bottom-left-radius: 16px;
       border-width: 0 0 1px 1px;
       box-shadow: -6px 5px 0px 4px #ffffff;
       z-index: 15
     }
    `;

- Nipun Ravisara