@Dealaxer

Не работает linearGradient SVG в новом Firefox, у всех так?

Народ, приветствую всех.

После обновления мозиллы на последнюю версию (56), анимация линейного градиента перестала быть полупрозрачной на краях, теперь блеск идет сплошным цветом.
Код:
<defs>
   <linearGradient id="shine" x1="0%" y1="0%" x2="100%" y2="100%">
	<stop offset="0.04" style="stop-color:#FFFFFF;stop-opacity:0">
        <animate id="an1" attributeName="offset" dur="1.5s" values="0.04;0.94" begin="3s;an1.end+3s" repeatCount="indefinite" />
    </stop>
    <stop offset="0.08" style="stop-color:#FFFFFF;stop-opacity:0.7">
        <animate id="an2" attributeName="offset" dur="1.5s" values="0.2;0.98" begin="3s;an2.end+3s" repeatCount="indefinite" />
    </stop>
    <stop offset="0.10" style="stop-color:#FFFFFF;stop-opacity:0">
        <animate id="an3" attributeName="offset" dur="1.5s" values="0.30;1" begin="3s;an3.end+3s" repeatCount="indefinite" />
    </stop>
   </linearGradient>
   

    <mask id="myShiningMask" >
      <rect x="0" y="0" width="100%" height="100%" fill="url(#shine)" />
    </mask>
</defs>


Во всех других браузерах, как работала анимация, так и работает. Может в мозилле что-то изменилось?
Кто в курсах?

Заранее, благодарен.
  • Вопрос задан
  • 357 просмотров
Решения вопроса 1
@Dealaxer Автор вопроса
Короче не знаю с чем это связано, но думаю что с тегом mask и его применением, вопрос решил так:
раньше для наложения анимации на объект <g><path> применялся атрибут mask="url(#myShiningMask)".
Сейчас код
<mask id="myShiningMask" >
      <rect x="0" y="0" width="100%" height="100%" fill="url(#shine)" />
    </mask>

выкинул из SVG и вместо атрибута mask, применил напрямую fill="url(#shine)".

Анимация заиграла во всех браузерах одинаково с прозрачностью по контуру объекта без маски!

Непонятно, почему атрибут mask не пошел на новом Firefox.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы