Блог

Главная - Вопросы по программированию - Цвет анимации штриха SVG отображается правильно в Firefox, но не удается в Chrome

Цвет анимации штриха SVG отображается правильно в Firefox, но не удается в Chrome

#google-chrome #svg #firefox #svg-animate

Вопрос:

Когда анимация закончится, цвет штриха должен измениться на черный

         100% {
            stroke: black;

Это было правильно в Firefox, но не в Chrome

кодовое обозначение: https://codepen.io/sendmead/pen/MWpzRjK

Вот часть кода svg:

         @keyframes keyframes12 {
          from {
            stroke: blue;
            stroke-dashoffset: 482;
            stroke-width: 128;
          }
          61% {
            animation-timing-function: step-end;
            stroke: blue;
            stroke-dashoffset: 0;
            stroke-width: 128;
          }
          100% {
            stroke: black;
            stroke-width: 1024;
          }
        }
        #char-animation-12 {
          animation: keyframes12 0.6422526041666666s both;
          animation-delay: 8.892740885416666s;
          animation-timing-function: linear;
        }

Ответ №1:

Похоже, вы запускаете ошибку Chrome, помещая объявление функции синхронизации анимации внутри ключевого кадра (что я не считаю законным и не видел раньше). Если вы избавитесь от конца шага и добавите другой ключевой кадр, чтобы он имитировал конец шага, все будет работать, по крайней мере, в этом минимальном тестовом примере. Я также уменьшил десятичные знаки в таймингах — слишком много цифр иногда вызывает ошибку в других местах, где ребята из браузера не очистили свои входные данные, поэтому не помешает избавиться от лишних цифр.

(Также, пожалуйста, опубликуйте полный минимальный тестовый пример на SO. Ссылки гниют)

 <svg version="1.1" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
  <g stroke="white" stroke-dasharray="1,1" stroke-width="0" transform="scale(4, 4)">
    <line x1="0" y1="0" x2="256" y2="256"></line>
    <line x1="256" y1="0" x2="0" y2="256"></line>
    <line x1="128" y1="0" x2="128" y2="256"></line>
    <line x1="0" y1="128" x2="256" y2="128"></line>
  </g>
  <g transform="scale(1, -1) translate(0, -768)">
    <style type="text/css">      
        @keyframes keyframes12 {
          0% {
            stroke: blue;
            stroke-dashoffset: 482;
            stroke-width: 128;
          }
          61% {
            stroke: blue;
            stroke-dashoffset: 0;
            stroke-width: 128;
          }
          
          99% {
            stroke: blue;
            stroke-dashoffset: 0;
            stroke-width: 128;
          }
          
          100% {
            stroke: black;
            stroke-dashoffset: 0;
            stroke-width: 1024;
          }
        }
      
        #char-animation-12 {
          animation: keyframes12 0.64s both;
          animation-delay: 8.8s;
          animation-timing-function: linear;
        }
      
    </style>
    
      <path d="M 746 40 L 779 4 Q 800 -17 817 -43 Q 834 -70 849 -89 L 874 -120 Q 892 -138 904 -136 Q 916 -136 924 -124 Q 932 -113 930 -92 Q 926 -35 852 9 L 804 35 Q 779 47 771 49 L 756 54 Q 742 57 742 50 Q 740 47 746 40 Z" fill="lightgray"></path>

      <clipPath id="char-clip-12">
        <path d="M 746 40 L 779 4 Q 800 -17 817 -43 Q 834 -70 849 -89 L 874 -120 Q 892 -138 904 -136 Q 916 -136 924 -124 Q 932 -113 930 -92 Q 926 -35 852 9 L 804 35 Q 779 47 771 49 L 756 54 Q 742 57 742 50 Q 740 47 746 40 Z"></path>
      </clipPath>
      <path clip-path="url(#char-clip-12)" d="M 750 48 L 844 -23 L 881 -66 L 904 -112" fill="none" id="char-animation-12" stroke-dasharray="354 708" stroke-linecap="round"></path>
    
  </g>
</svg>

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

1. Это отлично работает, просто убрав «функцию синхронизации анимации» под ключевыми кадрами. Спасибо тебе, Майкл!! В любом случае, я свернул код в codepen.

Метки: ,