Отвечая на вопрос: Как анимировать градиентную непрозрачность в SVG?
столкнулся со странным поведением анимации атрибута offset
Ниже код, который прекрасно работает в Firefox, но любые попытки анимировать атрибут offset
линейного градиента окончились ничем.
Подойдут любые решения данной проблемы с помощью: SVG, CSS, CSS3, JS
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="50%" height="50%" viewBox="0 0 900 900" >
<linearGradient id="bgg" x1="0" y1="0" x2="900" y2="900" gradientUnits="userSpaceOnUse">
<stop offset="0%" stop-color="dodgerblue"/>
<stop offset="52%" stop-color="white">
<animate
attributeName="offset"
values="100%;0%;100%"
dur="4s"
repeatCount="indefinite">
</animate>
</stop>
<stop offset="100%" stop-color="gold">
<animate
attributeName="offset"
values="100%;50%;100%"
dur="4s"
repeatCount="indefinite">
</animate>
</stop>
</linearGradient>
<rect x="50" y="50" width="50%" height="50%" rx="5%" fill="url(#bgg)" />
</svg>
Пробовал также использовать проценты и gradientUnits ="objectBoundingBox"
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="50%" height="50%" viewBox="0 0 900 900" >
<defs>
<linearGradient id="bgg" x1="0%" y1="0%" x2="100%" y2="100%" gradientUnits="objectBoundingBox">
<stop offset="0%" stop-color="dodgerblue"/>
<stop offset="52%" stop-color="white">
<animate
attributeName="offset"
values="100%;0%;100%"
dur="4s"
repeatCount="indefinite">
</animate>
</stop>
<stop offset="100%" stop-color="gold">
<animate
attributeName="offset"
values="100%;50%;100%"
dur="4s"
repeatCount="indefinite">
</animate>
</stop>
</linearGradient>
</defs>
<rect x="50" y="50" width="50%" height="50%" rx="5%" fill="url(#bgg)" />
</svg>
Но это не принесло положительного результата в Chrome
В Firefox и этот вариант работает отлично.
Chrome
, что-то не так вместе с его экспериментальными технологиямиJS
смещения градиента с помощьюoffset
атрибута, а не просто смещение градиента. То есть надо забрать offset в переменную из SVG и изменять его программно.