blob: 45d043f598da15bac3184895c523a60b436aa699 [file] [log] [blame]
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Basic//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-basic.dtd">
<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 800 600" onload="createMask()">
<rect x="0" y="100" width="800" height="100" fill="blue" mask="url(#dynMask)"/>
<g id="content"/>
<script>
var content = document.getElementById("content");
function createMask()
{
var mask = document.createElementNS("http://www.w3.org/2000/svg", "mask");
mask.setAttribute("id", "dynMask");
mask.setAttribute("maskUnits", "userSpaceOnUse");
mask.setAttribute("x", "0");
mask.setAttribute("y", "0");
mask.setAttribute("width", "800");
mask.setAttribute("height", "300");
var rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
rect.setAttribute("width", "800");
rect.setAttribute("height", "300");
rect.setAttribute("fill", "red");
mask.appendChild(rect);
content.appendChild(mask);
}
</script>
</svg>