1316719-1a.html (690B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>mask-image with scale transform</title> 4 <style> 5 6 body { 7 margin: 0; 8 } 9 10 #transform { 11 width: 10px; 12 height: 10px; 13 transform: scale(20); 14 transform-origin: top left; 15 padding: 5px 10px; 16 } 17 18 #opacity { 19 opacity: 0.8; 20 } 21 22 #mask { 23 width: 10px; 24 height: 10px; 25 background: green; 26 mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 10 10"><circle cx="5" cy="5" r="5" fill="black"/></svg>'); 27 } 28 29 #activator { 30 border: 1px solid transparent; 31 will-change: transform; 32 } 33 34 </style> 35 36 <div id="transform"> 37 <div id="opacity"> 38 <div id="mask"> 39 <div id="activator"></div> 40 </div> 41 </div> 42 </div>