mask-on-outflowElement-01a.html (1182B)
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 width: 300px; 13 height: 300px; 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 mask, not by the 100x100 31 overflow:hidden clip. --> 32 </div> 33 </div> 34 </div> 35 <svg height="0"> 36 <defs> 37 <mask id="myMask" x="0" y="0" width="1" height="1" maskUnits="objectBoundingBox"> 38 <rect x="0" y="0" width="100" height="100" style="stroke:none; fill: #ffffff"/> 39 <rect x="100" y="100" width="100" height="100" style="stroke:none; fill: #ffffff"/> 40 <rect x="200" y="200" width="100" height="100" style="stroke:none; fill: #ffffff"/> 41 <!-- The forth rect should be clipped out --> 42 <rect x="300" y="300" width="100" height="100" style="stroke:none; fill: #ffffff"/> 43 </mask> 44 </defs> 45 </svg> 46 </body> 47 </html>