У меня такая проблема, что не удается совместить прозрачную текстовую маску и прогресс-бар: получается либо статичная прозрачная маска либо аниминированный прогресс-бар без надписи.
Необходимо сделать так, чтобы был фоновый круг и круг заполняющий (прогресс-бар) с наложенной маской-текстом, через которую должен быть виден фон сайта, независимо от количества слоёв (в данном случае кругов).
Круг с прозрачной маской.
<svg viewBox="-10 -10 160 900" width="100" height="100%">
<defs>
<mask id="myMask">
<rect width="100%" height="100%" fill="#fff" />
<text x="19" y="85" style="font-size:35" id="myText1">HTML</text>
</mask>
</defs>
<circle id="masked" r="65" style=" mask: url(#myMask)" fill="rgb(216, 106, 247)" cx="70" cy="70" />
</svg>
И прогресс-бар.
<svg viewBox="0 0 360 160" width="360" height="160">
<defs>
<clipPath id="left-to-right">
<rect x="130" y="30" width="100" height="0">
<animate attributeName="height" values="100;50" dur="5s" fill="freeze"/>
</rect>
</clipPath>
</defs>
<circle cx="180" cy="80" r="50" fill="red"/>
<circle cx="180" cy="80" r="50" fill="black" clip-path="url(#left-to-right)"/>
</svg>
Моя попытка их совместить.
<svg viewBox="0 0 360 160" width="360" height="160">
<defs>
<mask id="myMask">
<rect width="100%" height="100%" fill="#fff" />
<text x="19" y="85" id="myText1" style="font-size:35" >HTML</text>
</mask>
<clipPath id="filling">
<rect x="130" y="30" width="100" height="0">
<animate attributeName="height" values="100;10" dur="1s" fill="freeze"/>
</rect>
</clipPath>
</defs>
<circle id="masked" cx="180" cy="80" r="50" fill="red"/>
<circle id="masked" cx="180" cy="80" r="50" fill="black" clip-path="url(#filling)"/>
</svg>
Подскажите, куда нужно вставлять маску, чтобы всё заработало.