Блог

Главная - Вопросы по программированию - Анимация SVG в Safari

Анимация SVG в Safari

#animation #svg #safari

Вопрос:

У меня есть анимация SVG star, которая работает в Chrome и Firefox, но не на настольных или мобильных устройствах Safari.

У кого-нибудь есть идеи, почему он не запускается в Safari?

ключевые кадры также для webkit

 @keyframes staranimation {
  10% {
    stroke-dashoffset: 100;
    stroke: #a98f22;
    opacity: 1;
  }
  30% {
    opacity: 1;
    fill: #a98f22;
  }
  60% {
    opacity: 0.3;
    fill: #a98f22;
  }
  80% {
    opacity: 0.6;
    fill: #a98f22;
  }
  100% {
    opacity: 1;
    fill: #a98f22;
    stroke: #a98f22;
  }
}

.star {
    polygon {

    amp;.fillfirst{
      stroke: #fff;
      -webkit-stroke: #fff;
      stroke-width: 1;
      -webkit-stroke-width: 1;
      fill: #ffff00;
      animation: staranimation 4s linear infinite;
      -webkit-animation: staranimation 4s linear infinite;
      -moz-animation: staranimation 4s linear infinite;
      animation-delay: 0.5s;
      animation-delay: 0.5s;
    }
    amp;.fillsecond {
      stroke: #fff;
      stroke-width: 1;
      fill: #ffff00;
      /* stroke-dasharray: 20;
      stroke-dashoffset: 200; */
      animation: staranimation 4s linear infinite;
      -webkit-animation: staranimation 4s linear infinite;
      -moz-animation: staranimation 4s linear infinite;
      animation-delay: 1s;
    }
   }
  }


<div className="stars">
  <svg height="45" width="23" className="star">
    <polygon className='fillfirst' points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78" />
  </svg>
  <svg height="45" width="23" className="star">
    <polygon className='fillsecond' points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78" />
   </svg>
 </div>

Комментарии:

1. Это не className="..." так , это просто class="..." (как на SVG, так и на обоих полигонах).

2. в классе React есть имя класса

3. Раньше в safari была эта ошибка, когда, если у вас была анимация-webkit, объявленная последней по порядку, она ожидала совпадения ключевых кадров-webkit. Поэтому я бы полностью избавился от анимации-webkit-и посмотрел, исправит ли она это.

4. все еще не работает без-webkit-анимации

Ответ №1:

Решил мою проблему, импортировав ключевые кадры из стилизованных компонентов.

 const staranimation = keyframes`
 ...
`

и затем

 animation: ${staranimation} 4s linear infinite;
Метки: