clipPath-on-outflowElement-01a.html (886B)
1 <!DOCTYPE html> 2 <html> 3 <style type="text/css"> 4 #outer { 5 width: 100px; 6 height: 100px; 7 overflow: hidden; 8 } 9 10 #clipped { 11 clip-path: url(#myClip); 12 width: 200px; 13 height: 200px; 14 } 15 16 #absolutePosition { 17 position: absolute; 18 top: 0; 19 left: 0; 20 width: 400px; 21 height: 400px; 22 background-color: blue; 23 } 24 </style> 25 26 <body style="margin: 0px;"> 27 <div id="outer"> 28 <div id="clipped"> 29 <div id="absolutePosition"> 30 <!-- This should only be clipped by the clip-path, not by the 100x100 31 overflow:hidden clip. --> 32 </div> 33 </div> 34 </div> 35 <svg height="0"> 36 <defs> 37 <clipPath id="myClip"> 38 <rect x="0" y="0" width="100" height="100"/> 39 <rect x="100" y="100" width="100" height="100"/> 40 <rect x="200" y="200" width="100" height="100"/> 41 </clipPath> 42 </defs> 43 </svg> 44 </body> 45 </html>