SVG Test - clipping and linear gradient

by Jayson Buquia

HTML

<svg width="300px" height="250px" style="background:#fafafa">
    <defs>
        <style>
            #t1 {
                font-family: sans-serif;
                font-size: 1em;
                font-weight: bolder;            
            }
        </style>
        
        
        <clipPath id="c1">
            <text x="0" y="20" id="t1" fill="silver">Sample Text Only</text>
        </clipPath>
        <linearGradient id="g1" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0" stop-color="red"></stop>           
            <stop offset="80%" stop-color="orange"></stop>
        </linearGradient>        
    </defs>
    
    <rect x="0" y="0" width="150" height="25" clip-path="url(#c1)" fill="url(#g1)"></rect>
    
</svg>