Задать вопрос
@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>


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

Заранее, благодарен.
  • Вопрос задан
  • 362 просмотра
Подписаться 2 Средний Комментировать
Решения вопроса 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.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

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

Похожие вопросы