1 <?xml version=
"1.0" encoding=
"UTF-8"?>
2 <!DOCTYPE svg PUBLIC
"-//W3C//DTD SVG 1.1 Basic//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-basic.dtd">
3 <svg xmlns=
"http://www.w3.org/2000/svg" xmlns:
xlink=
"http://www.w3.org/1999/xlink" id=
"svg-root" width=
"100%" height=
"100%" viewBox=
"0 0 480 360" onload=
"createClipPath()">
4 <g id=
"content" transform=
"scale(1, 1.5)">
5 <text font-size=
"60" fill=
"navy" clip-path=
"url(#dynClip)" x=
"10" y=
"70">Clipped. INVISIBLE.
</text>
8 var content = document.getElementById(
"content");
10 function createClipPath()
12 var clipPath = document.createElementNS(
"http://www.w3.org/2000/svg",
"clipPath");
13 clipPath.setAttribute(
"id",
"dynClip");
14 clipPath.setAttribute(
"clipPathUnits",
"userSpaceOnUse");
16 var path = document.createElementNS(
"http://www.w3.org/2000/svg",
"path");
17 path.setAttribute(
"d",
"M 0 0 l 200 0 l 0 200 l -200 0 Z");
19 clipPath.appendChild(path);
20 content.appendChild(clipPath);