<!-- Any copyright is dedicated to the Public Domain. http://creativecommons.org/publicdomain/zero/1.0/ --> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg"> <body style="margin:0"> <div style="clip-path: url(#c1); width:500px; height:200px; background:lime;"> <div style="height:200px;"/> <div style="height:200px; background:blue;"/> </div> <svg:svg height="0"> <!-- so that other documents can svg:use this one and force it to load before onload --> <svg:g id="empty" /> <svg:clipPath id="c1"> <svg:rect x="0" y="0" width="100" height="150"/> <svg:rect x="100" y="0" width="100" height="300"/> </svg:clipPath> </svg:svg> </body> </html>