paint-on-maskLayer-1b.html (726B)
1 <!DOCTYPE html> 2 <html> 3 <title>Paint positioned mask onto mask layer</title> 4 <style type="text/css"> 5 #inner { 6 width: 200px; 7 height: 200px; 8 box-sizing:border-box; 9 background: blue; 10 /* make mask pained on mask layer */ 11 border: 1px solid transparent; 12 will-change: transform; 13 } 14 15 #outer { 16 width: 200px; 17 height: 200px; 18 mask-image: url(#mymask); 19 /* make it fixed so that inner div has different AGR with outter div */ 20 position: fixed; 21 } 22 </style> 23 <div id="outer"> 24 <div id="inner"></div> 25 </div> 26 27 <svg height="0"> 28 <defs> 29 <mask id="mymask" x="0" y="0" width="1" height="1"> 30 <rect x="0" y="0" width="100" height="100" fill="white"/> 31 </mask> 32 </defs> 33 </svg> 34 </html>