clip-path-path-002-ref.html (684B)
1 <!-- 2 Any copyright is dedicated to the Public Domain. 3 http://creativecommons.org/publicdomain/zero/1.0/ 4 --> 5 <!DOCTYPE html> 6 <html> 7 <head> 8 <title>CSS Masking: Reference for clip-path's path function with evenodd</title> 9 <style type="text/css"> 10 #rect { 11 width: 100px; 12 height: 100px; 13 background-color: green; 14 clip-path: url("#clip"); 15 } 16 </style> 17 </head> 18 <body> 19 <p>The test passes if there are a green hollow rect.</p> 20 <div id="rect"></div> 21 <svg height="0" width="0"> 22 <defs> 23 <clipPath id="clip"> 24 <path clip-rule="evenodd" d="M10,10h80v80h-80zM25,25h50v50h-50z"/> 25 </clipPath> 26 </defs> 27 </svg> 28 </body> 29 </html>