<?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>