https://drafts.csswg.org/css-timing-1/#valdef-cubic-bezier-timing-function-ease-in

у использовать CSS-анимацию для атрибута "d" к SVG-пути. Этот пример работает в Google Chrome:

body {
  background-color: #022040;
}

#path {
  d: path('M425,225 L475,275 L575,175 L675,275 L775,175 L875,275 L925,225'); 
  stroke: #1EFE64;
  fill: none;
  animation-name: path;
  animation-duration: 5s;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
}


@keyframes path {

  0% {
     d: path('M425,225 L475,275');
  }

  25% {
     d: path('M425,225 L475,275 L575,175 L575,175 L575,175 L575,175 L575,175');
  }
  
  50% {
     d: path('M425,225 L475,275 L575,175 L675,275 L675,275 L675,275 L675,275'); 
  }
  
  75% {
     d: path('M425,225 L475,275 L575,175 L675,275 L775,175 L775,175 L775,175'); 
  }
  
  90% {
     d: path('M425,225 L475,275 L575,175 L675,275 L775,175 L875,275 L875,275'); 
  }
  
  100% {
     d: path('M425,225 L475,275 L575,175 L675,275 L775,175 L875,275 L925,225'); 
  }
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1000" height="400">
<path id="path" stroke-width="20"/>
</svg>

Но не работает в Safari Pc / Mobile и FireFox.

Как исправить ошибку? Или я должен использовать тег "animate" в svg?

Помогите мне, пожалуйста) Спасибо!

 Robert Longson27 сент. 2017 г., 19:50
Эти браузеры поддерживают только d как атрибут, а не как CSS. Вы можете повторить анимацию в SMIL, если хотите их поддерживать.

Ответы на вопрос(1)

Решение Вопроса

d SVG-свойство Geometry, определенное в спецификации SVG 2 наhttps://svgwg.org/svg2-draft/paths.html#TheDProperty, Механизм компоновки Blink в Google Chrome является единственным механизмом компоновки, который поддерживает это свойство, и его реализация не соответствует определению текущей спецификации.

Соответствующие страницы отслеживания проблем:

Bugzilla @ Mozilla Bug 1383650Microsoft Edge Development Issue 11543103Монорельс Выпуск 652822

И, да, вы можете добиться того же эффекта, используя SVGanimate элемент:

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1000 1000">
    <title>Path Animation</title>
    <path fill="none" stroke="hsl(139, 99%, 56%)" stroke-width="20">
        <animate attributeName="d" values="
            M 425 225 L 475 275;
            M 425 225 L 475 275 L 575 175 L 575 175 L 575 175 L 575 175 L 575 175;
            M 425 225 L 475 275 L 575 175 L 675 275 L 675 275 L 675 275 L 675 275;
            M 425 225 L 475 275 L 575 175 L 675 275 L 775 175 L 775 175 L 775 175;
            M 425 225 L 475 275 L 575 175 L 675 275 L 775 175 L 875 275 L 875 275;
            M 425 225 L 475 275 L 575 175 L 675 275 L 775 175 L 875 275 L 925 225
        " keyTimes="0; 0.25; 0.5; 0.75; 0.9; 1" calcMode="spline" keySplines="0.42 0 1 1; 0.42 0 1 1; 0.42 0 1 1; 0.42 0 1 1; 0.42 0 1 1" dur="5s" fill="freeze"/>
    </path>
</svg>

0.42 0 1 1 является набором кубических значений Безье дляease-in animation-timing-function ключевое слово property, как определено в CSS Timing Functions, уровень 1, спецификация:https://drafts.csswg.org/css-timing-1/#valdef-cubic-bezier-timing-function-ease-in.

Ваш ответ на вопрос