<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01//EN' 'http://www.w3.org/TR/html4/strict.dtd'>
<html lang='en'>
   <head>

   <title>HTML Script Control of Embedded SVG</title>

   <script type='text/javascript'>
   <!--
      // based on code by Jonathan Watt (jwatt)
      var svgDocument = null;
      var svgWindow = null;
      var svgRoot = null;

      function InitHTML()
      {

         var embed = document.getElementById('embed');
         try
         {
            svgDocument = embed.getSVGDocument();
         }
         catch(exception)
         {
            alert('The GetSVGDocument interface is not supported');
         }

         if (svgDocument && svgDocument.defaultView)  // try the W3C standard way first
         {
            svgWindow = svgDocument.defaultView;
         }
         else if (embed.window)
         {
            svgWindow = embed.window;
         }
         else
         {
            try
            {
               svgDocument = embed.getWindow();
            }
            catch(exception)
            {
               alert('The DocumentView interface is not supported\r\n' + 'Non-W3C standard methods of obtaining \'window\' also failed');
            }
         }

         if ( svgDocument )
         {
            svgRoot = svgDocument.documentElement;
         }
      }

      function ChangeFill()
      {
         var targetId = document.forms.fillControl.target.value;
         var color = document.forms.fillControl.color.value;
         var targetElement = svgDocument.getElementById( targetId );
         targetElement.setAttributeNS(null, 'fill', color);
      }

      function ChangeStroke()
      {
         SetStrokeColor();
      }

      function ReportTarget( targetId )
      {
         document.forms.fillControl.target.value = targetId;
      }


   // -->
   </script>

</head>
<body bg-color='#fff' onload='InitHTML()'>

   <div style='position:absolute; top:100px; left:310px;'>
      <form id='fillControl'>
         <label for='color'>Fill Color:</label>
         <br />
         <input type='text' id='color' value='lime' />
         <br />
         <label for='target'>Target:</label>
         <br />
         <input type='text' id='target' value='bottom' />
      </form>
      <button onclick='ChangeFill()'/>Change Fill</button>
   </div>

   <div style='position:absolute; top:100px; left:470px;'>
      <form id='strokeControl'>
         <label for='color'>Stroke Color:</label>
         <br />
         <input type='text' id='color' value='lime' />
         <br />
         <label for='target'>Target:</label>
         <br />
         <input type='text' id='target' value='top' />
      </form>
      <button onclick='ChangeStroke()'/>Change Stroke</button>
   </div>

   <embed id='embed' src='html-svg.svg' type='image/svg+xml' height='300' width='300'>

</body>
</html>