C. Using Javascript functions in HTML to modify attributes of SVG objects

This shows one a few simple ways to leverage the sophisticated GUI of the HTML DOM to use information from the user to modify SVG content. We may either traverse the SVG DOM by finding children of parent nodes and their properties or by using the perhaps, more simple, "getElementById" construction to find labeled SVG objects. The following examples illustrate aspects of each approach.
 

Example 0: (Working in IE, Opera, and (except for the SMIL) FF

HTML SVG
<html><head><script> var E; function prepare(){ var S=document.getElementById("sv") var SD=S.getSVGDocument(); E=SD.getElementById('E'); } function change(v){ E.setAttribute("fill", v); } </script></head> <body onload="prepare()"><div align="center"> <embed id="sv" src="ovaltest.svg" width=400 height=200> </embed> <form name="f"> <select onchange="change(this.value)"> <option value="orange">orange</option> <!--etc.--> <option value="red">red</option> </select> </form></div></body></html> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <radialGradient id="fire" cx="250" cy="80" r="150" fx="150" fy="80" gradientUnits="userSpaceOnUse"> <stop offset="0" stop-color="#FF0088"/> <stop offset="0.4" stop-color="#FFdd88"/> <stop offset="1" stop-color="#88aa00"/> </radialGradient> </defs> <path d="M 50 200 L 350 200 L 250 60 L 180 10z" stroke="black" fill="url(#fire)" stroke-width="5" /> <ellipse id="E" cx="150" cy="120" rx="100" ry="40" fill="red" stroke="black" opacity=".75"> <animate attributeName="cx" dur="2s" values="150;250;150" repeatCount="indefinite"/> </ellipse> </svg>


Example 1: (IE Only) In the following, a series of radio buttons allows the user to investigate values of two parameters of the feTurbulence property which allows images to be distorted in interesting ways. As the user chooses new values of “NumOctaves” and “BaseFrequency” the underlying image (in this case a simple polygon “path” filled with a radial gradient) is automatically adjusted through appropriate redefinitions of these attribute values. Results of one such pair of values is illustrated following the code.

HTML page Embedded SVG document
<html><head><script>
var svgdoc, TurbProp
function prepare(){
   svgdoc = document.sv.getSVGDocument();
   TurbProp=svgdoc.getElementById('Turb');
}
function baseF(v){
   TurbProp.setAttribute ("baseFrequency", v);
}
function octaves(v){
   TurbProp.setAttribute ("numOctaves", v);
}
</script></head><body onload="prepare()">
<embed name="sv" src="sixa.svg" width=500 height=350></embed>
<form name="f">
Base Frequency: .05
<input type="radio" name="b" checked onclick="baseF(.05)">
.10<input type="radio" name="b" onclick="baseF(.10)">
.20<input type="radio" name="b" onclick="baseF(.20)">
| | | | Octaves:
1<input type="radio" name="o" onclick="octaves(1)">
2<input type="radio" name="o" 
checked onclick="octaves(2)">
3<input type="radio" name="o" onclick="octaves(3)">
</form></body></html>		 <svg xml:space="preserve" 
width="7in" height="5in" viewBox="0 0 450 200">
<defs>
<filter id="Distort">
<feTurbulence id="Turb" 
baseFrequency=".05" numOctaves="2" result="turb"/>
<feDisplacementMap in="SourceGraphic" 
in2="turb" scale="100" xChannelSelector="R" 
yChannelSelector="B"/>
</filter>
<radialGradient id="gradient1" 
cx="250" cy="80" r="150" fx="150" fy="80" gradientUnits="userSpaceOnUse">
<stop offset="0" style="stop-color:#FF0088"/>
<stop offset="0.4" style="stop-color:#FFdd88"/>
<stop offset="0.8" style="stop-color:#ddff44"/>
<stop offset="1" style="stop-color:#88aa00"/>
</radialGradient>
</defs>

<g id="image" style="filter:url(#Distort)">
<path id="P" 
d="M 50 200 L 350 200 L 280 10 L 250 60 L 180 10z" style="fill:url(#gradient1)"/>
</g>
</svg>


Example2: IE Only

HTML page Embedded SVG document
<html><head> <script> function readtext(s){ var svgdoc = document.getElementById("sv").getSVGDocument(); var textobj = svgdoc.getElementById("T"); textobj.getFirstChild().nodeValue=s } </script></head> <body bgcolor=#aa88aa> <embed id="sv" src="imageclip.svg" width=400 height=270> </embed> <form name="f"> <input name="txt" onclick="this.value=''" onkeyup="readtext(this.value)" value="Hello"> <--- Type here </form> </body></html> <svg> <filter id="MyFilter" filterUnits="userSpaceOnUse"> <feImage transform="translate(-10 -50)" xlink:href="boul.gif" result="BackgroundImage"/> <feComposite operator="in" in2="SourceGraphic" result="CompImage"/> </filter> <g id="image" style="filter:url(#MyFilter)"> <path id="P" d="M 50 200 L 200 150 L 350 200 L 280 10 L 250 60 L 180 10z"/> <text id="T" x="140" y="225" style="font-family:impact;font-size:70"> Hello</text> </g> </svg>


In this example, each keystroke the user makes in the input field results in a new “stencil” being cut through which the underlying image may be viewed. 

This is accomplished by first finding the object named “T” inside the SVG, then locating its first child and then replacing the nodeValue of that with the user-defined string.