1316719-1b.html (577B)
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 </style> 30 31 <div id="transform"> 32 <div id="opacity"> 33 <div id="mask"></div> 34 </div> 35 </div>