clipPath-html-04.xhtml (830B)
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 xmlns:xlink="http://www.w3.org/1999/xlink"> 8 <head> 9 <style> 10 .unit { display:inline-block; width:100px; height:1px; } 11 </style> 12 </head> 13 <body style="margin:0; width:350px; line-height:100px;"> 14 <span class="unit"/><span class="unit" 15 /><span style="clip-path:url(#c1); background:lime;"><span class="unit"/><span class="unit" 16 /></span> 17 18 <svg:svg height="0"> 19 <!-- so that other documents can svg:use this one and force it to 20 load before onload --> 21 <svg:g id="empty" /> 22 <svg:clipPath id="c1"> 23 <svg:rect x="50" y="0" width="200" height="200"/> 24 </svg:clipPath> 25 </svg:svg> 26 </body> 27 </html>