Question

以下SVG代码在chrome上工作，但在Safari上不起作用。我无法弄清问题是什么。你能救我一下吗？

我已经添加了-wekbit-animation和-webkit-frames。据推测，Safari应识别2个标签。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" 
xmlns:xlink="http://www.w3.org/1999/xlink" 
preserveAspectRatio="none" 
x="0px" y="0px" 
width="2048px" height="1536px" 
viewBox="0 0 2048 1536" xml:space="preserve">
<defs>
  <path id="Layer_green_2_0_1_STROKES" stroke="#2C9842" 
        stroke-width="3.5" stroke-linejoin="round" 
        stroke-linecap="round" fill="#FFFFFF" 
        d="M 397.55 799.35 L 618.95 775.525 826.45 768.95 
          1027.1 693.3 1254.55 684.2" class="path"></path>
</defs> 
<g transform="matrix( 1, 0, 0, 1, 0,0) "> 
  <use xlink:href="#Layer_green_2_0_1_STROKES"></use>
</g>
<style>
  .path {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: dash 5s linear alternate infinite;
  }

  @keyframes dash {
   from {
      stroke-dashoffset: 1000;
   }
   to {
     stroke-dashoffset: 0;
   }
 }
 @-webkit-keyframes dash {
  from {
    stroke-dashoffset: 1000;
  }
  to {
    stroke-dashoffset: 0;
  }
 }

</style>
</svg>

Answer 1

删除<defs>标记，它将在Safari中显示

svg css3动画没有在Safari上显示

1 个答案: