Проблема с анимацией градиента в SVG в Safari может возникать из-за того, что Safari не всегда правильно интерпретирует определение градиента внутри стиля fill или stroke. Для решения этой проблемы с анимацией градиента в Safari, рекомендуется использовать SVG <animate> элемент для анимации градиента.
Пример кода с анимацией градиента в SVG с использованием <animate> элемента:
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
</defs>
<rect width="100" height="100" fill="url(#grad)">
<animate attributeName="x1" values="0%;100%" dur="4s" repeatCount="indefinite" />
<animate attributeName="x2" values="100%;200%" dur="4s" repeatCount="indefinite" />
</rect>
</svg>
В этом примере мы создаем линейный градиент с идентификатором "grad" и двумя стоп-цветами. Затем мы создаем прямоугольник и используем fill="url(#grad)" для применения градиента к прямоугольнику. Далее мы добавляем анимацию с помощью <animate> элемента для изменения координат x1 и x2 линейного градиента, создавая эффект движения градиента по прямоугольнику.
Такой подход позволяет обойти проблему с анимацией градиента в Safari, используя SVG анимацию вместо CSS анимации.
Надеюсь, это поможет вам решить проблему с анимацией градиента в SVG в Safari. Если у вас возникнут дополнительные вопросы, не стесняйтесь обращаться!