<!DOCTYPE html> <html> <style type="text/css"> #outer { width: 100px; height: 100px; overflow: hidden; } #clipped { mask: url(mask-on-outflowElement.svg); width: 300px; height: 300px; } #absolutePosition { position:absolute; top: 0; left: 0; width: 400px; height: 400px; background-color: blue; } </style> <body style="margin: 0px;"> <div id="outer"> <div id="clipped"> <div id="absolutePosition"> <!-- This should only be clipped by the mask, not by the 100x100 overflow:hidden clip. image mask is always clipped by the rect of associated element. The forth rectangle in mask-on-outflowElement.svg is clipped out since the size of #clipped is (w=300, height=300) --> </div> </div> </div> </body> </html>