How to put mask on svg text?

Question

HTML

There is a word "TEXT". There is a Svg file with a gradient. How can I attach this svg file to the word text?
Here is the svg code and I keep it in text-gradient.svg file

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" >
<defs> 
<linearGradient id="lgrad" x1="50%" y1="0%" x2="50%" y2="100%" > 
<stop offset="0%" style="stop-color:rgb(46,73,152);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(1,142,210);stop-opacity:1" />
</linearGradient> 
</defs>
<rect x="0" y="0" width="100%" height="100%" fill="url(#lgrad)"/>
</svg>

css.yoksel.ru/css-and-svg-masks found such an article, but I can't master it. It is for advanced people who know what svg is. I don't understand at all. Help me please. Thanks in advance.

Answer 1

Here is the text with your gradient