blob: 111598dd83ba195853e849c6317457df27936a30 [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 480 360" onload="createPatterns()">
<g id="content"/>
<script>
var content = document.getElementById("content");
function createPatterns()
{
// Setup "fillPattern"
var pattern1 = document.createElementNS("http://www.w3.org/2000/svg", "pattern");
pattern1.setAttribute("id", "fillPattern");
pattern1.setAttribute("patternUnits", "userSpaceOnUse");
pattern1.setAttribute("x", "0");
pattern1.setAttribute("y", "0");
pattern1.setAttribute("width", "20");
pattern1.setAttribute("height", "20");
var rect11 = document.createElementNS("http://www.w3.org/2000/svg", "rect");
rect11.setAttribute("x", "5");
rect11.setAttribute("y", "5");
rect11.setAttribute("width", "10");
rect11.setAttribute("height", "10");
rect11.setAttribute("fill", "red");
var rect21 = document.createElementNS("http://www.w3.org/2000/svg", "rect");
rect21.setAttribute("x", "10");
rect21.setAttribute("y", "10");
rect21.setAttribute("width", "10");
rect21.setAttribute("height", "10");
rect21.setAttribute("fill", "green");
pattern1.appendChild(rect11);
pattern1.appendChild(rect21);
content.appendChild(pattern1);
// Setup "strokePattern"
var pattern2 = document.createElementNS("http://www.w3.org/2000/svg", "pattern");
pattern2.setAttribute("id", "strokePattern");
pattern2.setAttribute("patternUnits", "userSpaceOnUse");
pattern2.setAttribute("x", "0");
pattern2.setAttribute("y", "0");
pattern2.setAttribute("width", "20");
pattern2.setAttribute("height", "20");
var rect12 = document.createElementNS("http://www.w3.org/2000/svg", "rect");
rect12.setAttribute("x", "5");
rect12.setAttribute("y", "5");
rect12.setAttribute("width", "10");
rect12.setAttribute("height", "10");
rect12.setAttribute("fill", "yellow");
var rect22 = document.createElementNS("http://www.w3.org/2000/svg", "rect");
rect22.setAttribute("x", "10");
rect22.setAttribute("y", "10");
rect22.setAttribute("width", "10");
rect22.setAttribute("height", "10");
rect22.setAttribute("fill", "blue");
pattern2.appendChild(rect12);
pattern2.appendChild(rect22);
content.appendChild(pattern2);
setupPatternUsers();
}
function setupPatternUsers()
{
var text1 = document.createElementNS("http://www.w3.org/2000/svg", "text");
text1.setAttribute("font-size", "68");
text1.setAttribute("x", "-150");
text1.setAttribute("y", "70")
text1.setAttribute("fill", "url(#fillPattern)");
text1.setAttribute("stroke", "none");
text1.appendChild(document.createTextNode("Pattern on fill"));
content.appendChild(text1);
var text2 = document.createElementNS("http://www.w3.org/2000/svg", "text");
text2.setAttribute("font-size", "68");
text2.setAttribute("x", "-150");
text2.setAttribute("y", "140")
text2.setAttribute("fill", "none");
text2.setAttribute("stroke", "url(#strokePattern)");
text2.appendChild(document.createTextNode("Pattern on stroke"));
content.appendChild(text2);
var text3 = document.createElementNS("http://www.w3.org/2000/svg", "text");
text3.setAttribute("font-size", "68");
text3.setAttribute("x", "-150");
text3.setAttribute("y", "210")
text3.setAttribute("fill", "url(#fillPattern)");
text3.setAttribute("stroke", "url(#strokePattern)");
text3.appendChild(document.createTextNode("Pattern on fill/stroke"));
content.appendChild(text3);
}
</script>
</svg>