paint-on-maskLayer-1a.html (682B)
1 <!DOCTYPE html> 2 <html> 3 <title>Paint clip-path 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 clip-path pained on mask layer */ 11 border: 1px solid transparent; 12 will-change: transform; 13 } 14 15 #outer { 16 width: 200px; 17 height: 200px; 18 clip-path: url(#path); 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 <clipPath id="path"> 30 <rect x="0" y="0" width="100" height="100"/> 31 </clipPath> 32 </defs> 33 </svg> 34 </html>