SVG animateMotion (сплайн calcMode) не работает в FF и Safari

Я хочу переместить круг по пути внутри svg с разным смягчением. Я хотел использовать animateMotion, но никогда не использовал его до. Использование JS в данном случае не вариант.

Он отлично работает в Chrome и Opera, но не в Safari и Firefox.

<animateMotion 
    dur="4s" 
    repeatCount="indefinite"
    calcMode="spline" 
    keySplines="0 0 0.5 1 ; 0 0 0.5 1 ; 0.3 0 1 1"
    keyTimes="0 ; 0.3 ; 0.6 ; 1"
    path="M54,183.8c0-86.5,128.5-87.2,128.5,0c0-86.5,116.9-87.2,116.9,0c0-86.5,115.1-87.2,115.1,0
    c0-86.5,55.5-123.5,55.5,111" />

Если я удалю calcMode, keySplines и keyTimes, он будет работать во всех браузерах.

Я также был бы признателен за любое альтернативное решение для перемещения элемента по закругленным кривым с различными замедлениями.


svg animation css-animations svg-animate
person browsergarden    schedule 03.01.2020    source источник
comment
Вы можете включить всю свою попытку, я вижу это работает в других упомянутых браузерах но между вашими keysplines и keytimes определенно есть что-то шаткое.   -  person Chris W.    schedule 03.01.2020
comment
Ваш пример кода не работает в Safari (12) и прерывистый в FF (71). Вот мой сокращенный код: jsfiddle.net/7axr6qf3 Если я заменю путь на путь, который вы использовали, он также работает в FF, но все еще не в SF. Так может быть что-н. не так с прошлым?   -  person browsergarden    schedule 03.01.2020
comment
Да, я не использую сафари ни для чего, поэтому не проверял его. Скоро вернусь и загляну сюда еще раз, технически у меня тоже рабочий день :D   -  person Chris W.    schedule 03.01.2020
comment
Ваш комментарий уже подтолкнул меня к правильному направлению поиска конкретных проблем Safari, но до сих пор не вижу никакого решения.   -  person browsergarden    schedule 03.01.2020

Ответы (1)


arrow_upward
2
arrow_downward

Решение

Я понял, что две вещи независимо друг от друга создавали проблему:

  1. Safari не принимает пробелы между значениями KeyTimes (все другие браузеры делают это, а Safari также делает это внутри KeySplines).
  2. Похоже, Firefox нужно еще одно значение для KeyTimes и KeySplines. Поэтому я добавил одно значение в каждую строку.

Фиксированный код:

keySplines="0 0 0.5 1 ; 0 0 0.5 1 ; 0 0 0.5 1 ; 0 0 0.5 1"
keyTimes="0;0.2;0.4;0.6;1"

Полный пример:

<svg version="1.1" id="Layer_5" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 500 500" style="enable-background:new 0 0 500 500;" xml:space="preserve">
  <g>
    <circle r="13.5" fill="black">
      <animateMotion 
      	dur="4s" 
      	repeatCount="indefinite"
      	calcMode="spline" 
        keySplines="0 0 0.5 1 ; 0 0 0.5 1 ; 0 0 0.5 1 ; 0 0 0.5 1"
      	keyTimes="0;0.2;0.4;0.6;1"
       	path="M54,183.8c0-86.5,128.5-87.2,128.5,0c0-86.5,116.9-87.2,116.9,0c0-86.5,115.1-87.2,115.1,0c0-86.5,55.5-123.5,55.5,111" />
	  </circle>
  	<path stroke="red" fill="none" d="M54,183.8c0-86.5,128.5-87.2,128.5,0c0-86.5,116.9-87.2,116.9,0c0-86.5,115.1-87.2,115.1,0c0-86.5,55.5-123.5,55.5,111"/>
  </g>
</svg>

person browsergarden    schedule 05.01.2020