Наложение прозрачной текстовой маски на анимированный прогресс-бар (SVG)

#css #анимация #svg #animate #mask

У меня такая проблема, что не удается совместить прозрачную текстовую маску и прогресс-бар:
получается либо статичная прозрачная маска либо аниминированный прогресс-бар без надписи.

Необходимо сделать так, чтобы был фоновый круг и круг заполняющий (прогресс-бар)
с наложенной маской-текстом, через которую должен быть виден фон сайта, независимо
от количества слоёв (в данном случае кругов). 

Круг с прозрачной маской.










И прогресс-бар.










Моя попытка их совместить.








Подскажите, куда нужно вставлять маску, чтобы всё заработало.
    

Ответы

Ответ 1

Поскольку вы не используете maskContentUnits = objectBoundingBox , координаты фильтра
рассчитываются глобально (относительно документа). И если вы сдвинули круг, неудивительно,
что текст на маске теперь в него не попадает. Прошерcтите координаты элементов так,
чтобы они попадали друг в друга, или попробуйте переделать фильтры под относительные
координаты.






Ответ 2

Я так понял вопрос и немного доработал решение Crantisz . Для анимации кликайте по пунктам меню.