Не отображается в safari SVG анимация

Question

Подскажите пожалуйста, как сделать что бы данный svg отображался в safari?

<!-- Background SVG -->
<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
    <g>
      <style type="text/css" >
      <![CDATA[

        @keyframes path {

            0% {
                d: path('m170,35c95,-42 112,47 156,-1c44,-48 170,36 138,196c-32,160 -45,52 -91,125c-46,73 -79,-63 -103,-1c-24,62 -199,-145 -123,-174c76,-29 -72,-103 23,-145z');
            }

            50% {
                d: path('M140,157C235,115 131,48 175,0C219,-48 439,-23 372,135C305,293 350,189 314,265C278,341 324,253 288,304C252,355 8,309 84,280C160,251 45,199 140,157z');
            }
            
            100% {
                d: path('M179,1C274,-41 131,48 175,0C219,-48 439,-23 372,135C305,293 350,189 314,265C278,341 324,253 288,304C252,355 8,309 84,280C160,251 84,43 179,1z'); 
            }
            
            
        }
        @-webkit-keyframes path {

            0% {
                d: path('m170,35c95,-42 112,47 156,-1c44,-48 170,36 138,196c-32,160 -45,52 -91,125c-46,73 -79,-63 -103,-1c-24,62 -199,-145 -123,-174c76,-29 -72,-103 23,-145z');
            }

            50% {
                d: path('M140,157C235,115 131,48 175,0C219,-48 439,-23 372,135C305,293 350,189 314,265C278,341 324,253 288,304C252,355 8,309 84,280C160,251 45,199 140,157z');
            }
            
            100% {
                d: path('M179,1C274,-41 131,48 175,0C219,-48 439,-23 372,135C305,293 350,189 314,265C278,341 324,253 288,304C252,355 8,309 84,280C160,251 84,43 179,1z'); 
            }
            
            
        }
        #backgroundSVG{
            d:path('m170,35c95,-42 112,47 156,-1c44,-48 170,36 138,196c-32,160 -45,52 -91,125c-46,73 -79,-63 -103,-1c-24,62 -199,-145 -123,-174c76,-29 -72,-103 23,-145z');
            animation-name: path;
            animation-duration:80s; 
            animation-timing-function: ease;
            animation-fill-mode: forwards;
            animation-iteration-count:infinite;
            animation-direction: alternate;
        }
        
        
      ]]>
    </style>
          <path  id="backgroundSVG"  fill="#1b161f">
          
           
        </path>
     
    </g> 
</svg>
<!-- /Background SVG -->

Answer 1

SVG не отображается в safari, так как path в CSS правилах понимают только webkit браузеры. Везде будет работать, когда примут стандарт SVG2 W3C

Чтобы заработало в safari нужно перевести CSS анимацию в SMIL SVG анимацию.

Анимируется атрибут d path. В атрибуте values прописываются все path, соответствующие начальному, промежуточному и конечному значению положения волны.

Обратите внимание: значения d path разделены точкой с запятой.

Забудете её поставить, - работать не будет.

Остальные значения атрибутов анимации интуитивно понятны.

<!-- Background SVG -->
<svg width="300" height="300" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink">  
    <path fill="#4444C1" stroke="black" d="m170,35c95,-42 112,47 156,-1c44,-48 170,36 138,196c-32,160 -45,52 -91,125c-46,73 -79,-63 -103,-1c-24,62 -199,-145 -123,-174c76,-29 -72,-103 23,-145z" >
      <animate
       attributeName="d"
       begin="0s"
       dur="14s"
       repeatCount="indefinite"
       values="
         m170,35c95,-42 112,47 156,-1c44,-48 170,36 138,196c-32,160 -45,52 -91,125c-46,73 -79,-63 -103,-1c-24,62 -199,-145 -123,-174c76,-29 -72,-103 23,-145z;
         M140,157C235,115 131,48 175,0C219,-48 439,-23 372,135C305,293 350,189 314,265C278,341 324,253 288,304C252,355 8,309 84,280C160,251 45,199 140,157z;
         M179,1C274,-41 131,48 175,0C219,-48 439,-23 372,135C305,293 350,189 314,265C278,341 324,253 288,304C252,355 8,309 84,280C160,251 84,43 179,1z;
         m170,35c95,-42 112,47 156,-1c44,-48 170,36 138,196c-32,160 -45,52 -91,125c-46,73 -79,-63 -103,-1c-24,62 -199,-145 -123,-174c76,-29 -72,-103 23,-145z
         " />
    </path>
     
</svg>
<!-- /Background SVG -->

Answer 2

Если вам нужна анимация волн в CSS, рассмотрите этот пример для использования.

Обратите внимание, что path находится в svg, затем клонируется там же

<g class="parallax">
   <use xlink:href="#gentle-wave" x="50" y="0" fill="#4579e2"/>
   <use xlink:href="#gentle-wave" x="50" y="3" fill="#3461c1"/>
   <use xlink:href="#gentle-wave" x="50" y="6" fill="#2d55aa"/>  
  </g>

В CSS перенесена анимация этих клонов

        .parallax > use {
  animation: move-forever 12s linear infinite;
}
.parallax > use:nth-child(1) {
  animation-delay: -2s;
}
.parallax > use:nth-child(2) {
  animation-delay: -2s;
  animation-duration: 5s;
}
.parallax > use:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 3s;
}

@keyframes move-forever {
  0% {
    transform: translate(-90px, 0%);
  }
  100% {
    transform: translate(85px, 0%);
  }
}
.editorial {
  display: block;
  width: 100%;
  height: 10em;
  margin: 0;
}

body {
  background-color: #323232;
  margin: 0;
  padding: 9em 0 0 0;
}

.content {
   background-color: #2d55aa;
  min-height: 75vh;
  margin: -.1em 0 0 0;
  padding: 1em;
   }


@media (max-width: 50em) {
  .content h1 {
    font-size: 12vmax;
  }

  .editorial {
    height: 17vw;
  }
}

<svg class="editorial"
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 24 150 28"
   preserveAspectRatio="none">
 <defs>
  <path 
    id="gentle-wave"
     d="m -160,44.4 c 30,0 58,
        -18 87.7,-18 30.3,0 58.3,
        18 87.3,18 30,0 58,-18 88,
        -18 30,0 58,18 88,18 l 0,
        34.5 -351,0 z" />
 </defs>
  <g class="parallax">
   <use xlink:href="#gentle-wave" x="50" y="0" fill="#4579e2"/>
   <use xlink:href="#gentle-wave" x="50" y="3" fill="#3461c1"/>
   <use xlink:href="#gentle-wave" x="50" y="6" fill="#2d55aa"/>  
  </g>
</svg>
<div class="content">
  
</div>

Источник

БЛОГ НА HUSL

Не отображается в safari SVG анимация

Ответы (2 шт):