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