mask-img.html (1030B)
1 <!DOCTYPE html> 2 <html> 3 <body style="margin:0"> 4 <div style="height:50px"></div> 5 <img border=0 src='data:image/svg+xml, 6 <!-- vim: set expandtab ts=2 sw=2 tw=80: --> 7 <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" 8 xmlns:xlink="http://www.w3.org/1999/xlink" 9 viewBox="0 0 700 80"> 10 <defs> 11 <style type="text/css"> 12 .fillSpan { 13 fill: lightgrey; 14 stroke: black; 15 } 16 </style> 17 <!-- Fade out effect --> 18 <mask id="fadeout" maskContentUnits="objectBoundingBox"> 19 <rect x="-0.05" y="-0.05" width="1.1" height="1.1" 20 fill="url(%23fadeoutGrad)"/> 21 </mask> 22 <linearGradient id="fadeoutGrad"> 23 <stop offset="0" stop-color="white" stop-opacity="1"/> 24 <stop offset="0.35" stop-color="white" stop-opacity="1"/> 25 <stop offset="0.9" stop-color="white" stop-opacity="0"/> 26 </linearGradient> 27 </defs> 28 <rect width="150" height="80" class="fillSpan" mask="url(%23fadeout)"/> 29 </svg> 30 ' width="700"> 31 </body> 32 </html>