<?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="createGradients()">
<g id="content"/>

<script>
	var content = document.getElementById("content");

	function createGradients()
	{
		// Setup "fillLinearGradient"
		var gradient1 = document.createElementNS("http://www.w3.org/2000/svg", "linearGradient");
		gradient1.setAttribute("id", "fillLinearGradient");
		gradient1.setAttribute("x1", "0");
		gradient1.setAttribute("x2", "1");

		var stop11 = document.createElementNS("http://www.w3.org/2000/svg", "stop");
		stop11.setAttribute("stop-color", "blue");
		stop11.setAttribute("offset", "0");

		var stop21 = document.createElementNS("http://www.w3.org/2000/svg", "stop");
		stop21.setAttribute("stop-color", "red");
		stop21.setAttribute("offset", "1");

		gradient1.appendChild(stop11);
		gradient1.appendChild(stop21);

		content.appendChild(gradient1);

		// Setup "strokeLinearGradient"
		var gradient2 = document.createElementNS("http://www.w3.org/2000/svg", "linearGradient");
		gradient2.setAttribute("id", "strokeLinearGradient");
		gradient2.setAttribute("x1", "0");
		gradient2.setAttribute("x2", "1");

		var stop22 = document.createElementNS("http://www.w3.org/2000/svg", "stop");
		stop22.setAttribute("stop-color", "yellow");
		stop22.setAttribute("offset", "0");

		var stop22 = document.createElementNS("http://www.w3.org/2000/svg", "stop");
		stop22.setAttribute("stop-color", "green");
		stop22.setAttribute("offset", "1");

		gradient2.appendChild(stop22);
		gradient2.appendChild(stop22);

		content.appendChild(gradient2);

		setupGradientUsers();
	}

	function setupGradientUsers()
	{
		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(#fillLinearGradient)");
		text1.setAttribute("stroke", "none");
		text1.appendChild(document.createTextNode("Gradient 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(#strokeLinearGradient)");
		text2.appendChild(document.createTextNode("Gradient 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(#fillLinearGradient)");	
		text3.setAttribute("stroke", "url(#strokeLinearGradient)");
		text3.appendChild(document.createTextNode("Gradient on fill/stroke"));

		content.appendChild(text3);
	}
</script>

</svg>