Ошибка фильтра/анимации SVG Safari

Question

У меня возникла проблема с фильтром SVG в анимации CSS в Safari.

http://codepen.io/robertjpotter/pen/AvzhL

Проблема заключается в том, что в Safari фильтр захватывает цвет из заполненного анимации. То, что я ожидаю, и что происходит в Chrome и Firefox, заключается в том, что фильтр будет захватывать начальный цвет анимации, а затем анимировать до конечного цвета вместе с каждым.

Я новичок в SVG, поэтому любая помощь очень ценится.

Answer 1

Вот как сделать повторную анимацию, чтобы она произошла в фильтре, используя элемент анимированного. Этот должен работать с Safari/Mac - но я тестировал его только в Chrome/Windows. Я не преобразовал ваши цвета из HSL, поэтому вы должны заменить .2/.1/.3 начальными значениями RGB, выраженными в процентах, и значениями .8/.6/.8 с конечными значениями RGB, выраженными как проценты. Используйте библиотеку «fakeSMIL» для совместимости с IE10 + (для нее Google).

<filter id="dropGlow" color-interpolation-filters="sRGB"> 
    <feGaussianBlur stdDeviation="2" result="coloredBlur"/> 
    <feMerge> 
     <feMergeNode in="coloredBlur"/> 
     <feMergeNode in="SourceGraphic"/> 
    </feMerge> 
    <feColorMatrix type="matrix" values="1 0 0 0 0 
              0 1 0 0 0 
              0 0 1 0 0 
              0 0 0 1 0"> 
    <animate attributeName="values" from="0 0 0 0 .2 
              0 0 0 0 .1 
              0 0 0 0 .3 
              0 0 0 1 0" 
             to="0 0 0 0 .8 
              0 0 0 0 .6 
              0 0 0 0 .8 
              0 0 0 1 0" 
     begin="4s" fill="freeze" dur="1s"/> 
      </feColorMatrix> 
    </filter>