Example


<svg width="8cm" height="3cm" viewBox="0 0 800 300" version="1.1">
     <desc>Example mask01 - blue text masked with gradient against red background </desc>
     <defs>
          <linearGradient id="Gradient" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="800" y2="0">
               <stop offset="0" stop-color="white" stop-opacity="0"/>
               <stop offset="1" stop-color="white" stop-opacity="1"/>
          </linearGradient>
          <mask id="Mask" maskUnits="userSpaceOnUse" x="0" y="0" width="800" height="300">
               <rect x="0" y="0" width="800" height="300" fill="url(#Gradient)"/>
          </mask>
          <text id="Text" x="400" y="200" font-family="Verdana" font-size="100" text-anchor="middle"> Masked text </text>
     </defs>
     <rect x="0" y="0" width="800" height="300" fill="#FF8080"/>
     <use xlink:href="#Text" fill="blue" mask="url(#Mask)"/>
     <use xlink:href="#Text" fill="none" stroke="black" stroke-width="2"/>
</svg>
Original SVG source