mask-html-01.xhtml (969B)
1 <!-- 2 Any copyright is dedicated to the Public Domain. 3 http://creativecommons.org/publicdomain/zero/1.0/ 4 --> 5 <html xmlns="http://www.w3.org/1999/xhtml" 6 xmlns:svg="http://www.w3.org/2000/svg"> 7 <body style="margin:0"> 8 <div style="mask: url(#m1); width:500px; height:500px; background:lime;"></div> 9 <svg:svg height="0"> 10 <!-- so that other documents can svg:use this one and force it to 11 load before onload --> 12 <svg:g id="empty" /> 13 <svg:mask id="m1" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox"> 14 <svg:linearGradient id="g" gradientUnits="objectBoundingBox" x2="0" y2="1"> 15 <svg:stop stop-color="white" offset="0"/> 16 <svg:stop stop-color="white" stop-opacity="0" offset="1"/> 17 </svg:linearGradient> 18 <svg:circle cx="0.25" cy="0.25" r="0.25" id="circle" fill="white"/> 19 <svg:rect x="0.5" y="0" width="0.5" height="1" fill="url(#g)"/> 20 </svg:mask> 21 </svg:svg> 22 </body> 23 </html>