<script language="JavaScript1.1">
<!--
	/*
	* Other parts required but not shown here:
	* In the HTML file, the form tag contains the following attribute:
	*
	*   onsubmit="set_gradient(); return false;"
	*
	* And the input type=button tag contains the following attribute:
	*
	*  onclick="set_gradient()"
	*/
	/*
	* This function sets the attributes of the gradient "gradient1"
	* according to the values entered in the form.
	*/
	function set_gradient ()
	{
		var svgobj;
		var gradobj;
		var svgstyle;
		var svgdoc = document.embeds['gradientSVG'].getSVGDocument();
		// 1. We retrieve the gradient node.
		gradobj = svgdoc.getElementById('gradient1');
		// 2. We find the first "stop" tag inside the gradient node.
		// We do this by looping through the gradient's children until we
		// hit a "stop" tag.
		svgobj = gradobj.getFirstChild();
		while (svgobj != null
			&& (svgobj.getNodeType() != 1 || svgobj.getTagName() != 'stop'))
		{
			svgobj = svgobj.getNextSibling();
		}
		// 3. We set the attributes and properties for this tag.
		svgobj.setAttribute ('offset', document.gradient.offset1.value);
		svgstyle = svgobj.getStyle();
		svgstyle.setProperty ('stop-color', document.gradient.color1.value);
		// 4. We find the second "stop" tag inside the gradient node.
		// We do this by continuing to loop through the gradient's children
		// until we hit a second "stop" tag.
		svgobj = svgobj.getNextSibling();
		while (svgobj != null
			&& (svgobj.getNodeType() != 1 || svgobj.getTagName() != 'stop'))
		{
			svgobj = svgobj.getNextSibling();
		}
		// 5. We set the attributes and properties for this tag.
		svgobj.setAttribute ('offset', document.gradient.offset2.value);
		svgstyle = svgobj.getStyle();
		svgstyle.setProperty ('stop-color', document.gradient.color2.value);
		// 6. We find the third "stop" tag inside the gradient node.
		// We do this by continuing to loop through the gradient's children
		// until we hit a third "stop" tag.
		svgobj = svgobj.getNextSibling();
		while (svgobj != null
			&& (svgobj.getNodeType() != 1 || svgobj.getTagName() != 'stop'))
		{
			svgobj = svgobj.getNextSibling();
		}
		// 7. We set the attributes and properties for this tag.
		svgobj.setAttribute ('offset', document.gradient.offset3.value);
		svgstyle = svgobj.getStyle();
		svgstyle.setProperty ('stop-color', document.gradient.color3.value);
	}
// -->
</script>
グラデーションのレッスンに戻る