title: How to create an attribute in SVG using JavaScript?
body: <p>I have a script in my application that hides g elements in an SVG that have specific ID values, but this only works if the g element has a visibility attribute.  However, the SVGs I'm using do not have a visibility attribute on the g elements and I'm not in control of the source.  Therefore, I need to find a way to dynymically add the visibility attribute when the parent HTML page is loaded.</p>
  
  <p>I would like the script to create the visibility attribute on all g elements that are children of <code>&lt;g id="Callouts"&gt;</code>.  For instance, the final code would look something like this:</p>
  
  <pre><code>&lt;g id="Callouts"&gt;
    &lt;g id="Callout1" visibility="visible"&gt;...&lt;/g&gt;
    &lt;g id="Callout2" visibility="visible"&gt;...&lt;/g&gt;
  &lt;/g&gt;
  </code></pre>
  
  <p>I've looked all over for examples where attributes are added to the SVG structure, but haven't been able to find anything yet.  It also doesn't help that I'm a complete novice when it comes to JavaScript.  Does anyone know how to do this?</p>
  
  <p><strong>UPDATE:</strong> I coupled Digital Plane's suggested code with the code I'm using to access the SVG document.  The resulting function is below.  This is supposed to show every g element under <code>&lt;g id="Callouts"&gt;</code>.  However, I keep getting an "object not supported" error on the for loop.</p>
  
  <pre><code>function displayOnload (svgName) {
      var svgEmbed = document.embeds[svgName];
      if (typeof svgEmbed.getSVGDocument != 'undefined') {
          var svgDocument = svgEmbed.getSVGDocument();
          var parentElement = svgDocument.getElementById('Callouts');
          if (parentElement != null) {
              var childElements = parentElement.getElementsByTagname('g');
              for (var i=0; i &lt; childElements.length; i++) {
                  childElements[i].setAttribute('visibility', 'visible');
              }
          }
      }
  }
  </code></pre>
  
  <p>Please forgive my ignorance about JavaScript, but what am I doing wrong here?</p>
  
  <p>UPDATE: Here is an example of my HTML code.</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:svg="http://www.w3.org/2000/svg"&gt;
  &lt;head&gt;
    &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
    &lt;title&gt;Drop Bar assembly (2328775)&lt;/title&gt;
    &lt;link rel="stylesheet" type="text/css" href="Content.css" /&gt;
    &lt;meta http-equiv="content-type" content="text/html;charset=utf-8"/&gt;
    &lt;script type="text/javascript"&gt;
      function displayOnload (svgName) {
        var svgEmbed = document.embeds[svgName];
        if (typeof svgEmbed.getSVGDocument != 'undefined') {
          var svgDocument = svgEmbed.getSVGDocument();
          var parentElement = svgDocument.getElementById('Callouts');
          var childElements = parentElement.getElementsByTagName('g');
          for (var i=0; i &amp;lt; childElements.length; i++) {
            childElements[i].setAttribute('visibility', 'hidden');
          }
        }
       }
    &lt;/script&gt;
    &lt;/head&gt;
    &lt;body onload="displayOnload('SVG')"&gt;
    ...
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>