How to create an attribute in SVG using JavaScript?

Question

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.

I would like the script to create the visibility attribute on all g elements that are children of <g id="Callouts">. For instance, the final code would look something like this:

<g id="Callouts">
  <g id="Callout1" visibility="visible">...</g>
  <g id="Callout2" visibility="visible">...</g>
</g>

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?

UPDATE: 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 <g id="Callouts">. However, I keep getting an "object not supported" error on the for loop.

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 < childElements.length; i++) {
                childElements[i].setAttribute('visibility', 'visible');
            }
        }
    }
}

Please forgive my ignorance about JavaScript, but what am I doing wrong here?

UPDATE: Here is an example of my HTML code.

<?xml version="1.0" encoding="UTF-8"?>
<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">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Drop Bar assembly (2328775)</title>
  <link rel="stylesheet" type="text/css" href="Content.css" />
  <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
  <script type="text/javascript">
    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 &lt; childElements.length; i++) {
          childElements[i].setAttribute('visibility', 'hidden');
        }
      }
     }
  </script>
  </head>
  <body onload="displayOnload('SVG')">
  ...
  </body>
</html>

Could you try using `getElementsByTagName` instead `getElementsByTagname`? Also, what line are you getting the error on? — Digital Plane, Sep 01 '11 at 18:50
Thanks for catching that! However, after updating the script, I'm now getting a "Expected ')'" error at the for loop, and an "Object expected" error at ``. — Morgan, Sep 01 '11 at 18:50
I posted an example of my HTML code. Let me know if you need to see anything else. — Morgan, Sep 01 '11 at 19:36

score 8 · Answer 1 · answered Sep 01 '11 at 16:51

8

You should be able to use setAttribute, with something like this:

element.setAttribute("visibility", "visible");

If you want all g elements that are children of <g id="Callouts">, do this on document load:

var element = document.getElementById("Callouts");
var elements = element.getElementsByTagName("g");
for(var i = 0; i < elements.length; i++)
  elements[i].setAttribute("visibility", "visible");

answered Sep 01 '11 at 16:51

Digital Plane

37,354
7
57
59

Thanks for the code. It seems like it would work, but I'm running into one small problem. I've updated the original post to explain. – Morgan Sep 01 '11 at 18:42

CoR · Answer 2 · 2011-11-22T12:14:05.060

2

No, you must use setAttributeNS(null, 'visibility', 'visible);

setAttribute might not work on/in svg on some browsers.

Or to be more blunt: setAttribute is DOM1 setAttributeNS is DOM2 Svg has name spaces, svg is xml so setAttributeNS is for you.

edited Nov 22 '11 at 12:14

answered Nov 17 '11 at 18:50

CoR

3,826
5
35
42

setAttribute is essentially equal to setAttributeNS(null, ...) as long as you don't use prefixed attributes, so for most attributes it works just fine with setAttribute. – Erik Dahlström Nov 18 '11 at 15:16
It should be equal, but it's not! It's just browser implementation. [link]http://stackoverflow.com/questions/2156278/adding-more-svg-elements-to-my-document-at-runtime – CoR Nov 21 '11 at 10:29

How to create an attribute in SVG using JavaScript?

2 Answers2