SVG анимация не отображается в Safari - PullRequest
0 голосов
/ 07 мая 2018

следующий код 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>

1 Ответ

0 голосов
/ 07 мая 2018

удалить <defs> тег, он будет отображаться в сафари

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...