active-clip-and-mask.html (1384B)
1 <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg"> 2 <rect width="100%" height="100%" fill="grey"/> 3 <g transform="translate(80 30)"> 4 5 <!-- active blob group with clip path and mask --> 6 <clipPath id="c4" clipPathUnits="userSpaceOnUse"> 7 <rect x="-80" y="100" width="100" height="100"/> 8 </clipPath> 9 <mask id="m4"> 10 <rect x="-80" y="100" width="100" height="100" fill="white"/> 11 <rect x="-60" y="120" width="40" height="40" fill="black"/> 12 </mask> 13 <g mask="url(#m4)" clip-path="url(#c4)"> 14 <g style = "will-change: opacity;"> 15 <rect x="-80" y="100" width="100" height="100" fill="blue"/> 16 </g> 17 </g> 18 19 <!-- active blob group with mask only --> 20 <mask id="m5"> 21 <rect x="60" y="100" width="100" height="100" fill="white"/> 22 <rect x="80" y="120" width="40" height="40" fill="black"/> 23 </mask> 24 <g mask="url(#m5)"> 25 <g style = "will-change: opacity;"> 26 <rect x="60" y="100" width="100" height="100" fill="blue"/> 27 </g> 28 </g> 29 30 <!-- active item with clip path only --> 31 <clipPath id="c6" clipPathUnits="userSpaceOnUse"> 32 <rect x="180" y="100" width="100" height="100"/> 33 </clipPath> 34 <g clip-path="url(#c6)"> 35 <g style = "will-change: opacity;"> 36 <rect x="180" y="100" width="100" height="100" fill="blue"/> 37 </g> 38 </g> 39 40 </g> 41 </svg>