clipPath-and-mask-on-outflowElement-01a.html (1280B)
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 mask: url(#myMask); 12 clip-path: url(#myClip); 13 width: 300px; 14 height: 300px; 15 } 16 17 #absolutePosition { 18 position: absolute; 19 top: 0; 20 left: 0; 21 width: 400px; 22 height: 400px; 23 background-color: blue; 24 } 25 </style> 26 27 <body style="margin: 0px;"> 28 <div id="outer"> 29 <div id="clipped"> 30 <div id="absolutePosition"> 31 <!-- This should only be clipped by the mask, not by the 100x100 32 overflow:hidden clip. --> 33 </div> 34 </div> 35 </div> 36 <svg height="0"> 37 <defs> 38 <mask id="myMask" x="0" y="0" width="400" height="400" maskUnits="userSpaceOnUse"> 39 <rect x="0" y="0" width="100" height="100" style="stroke:none; fill: #ffffff"/> 40 <rect x="100" y="100" width="100" height="100" style="stroke:none; fill: #ffffff"/> 41 <rect x="200" y="200" width="100" height="100" style="stroke:none; fill: #ffffff"/> 42 </mask> 43 <clipPath id="myClip"> 44 <rect x="0" y="0" width="100" height="100"/> 45 <rect x="100" y="100" width="100" height="100"/> 46 <rect x="200" y="200" width="100" height="100"/> 47 </clipPath> 48 </defs> 49 </svg> 50 </body> 51 </html>