Question

I have a SVG document; say as below:

<svg>
   <g ...>
      <rect id="perm1" ../>
      <rect id="temp1" ../>
</svg>

in the run-time, I am changing the id of the second ‘rect’ from ‘temp1’ to ‘calc_id1’ using java script functions (see below); but immediately after modifying it, I am calling another function in which I am trying to retrieve the rect element using getElementById() with the new id ‘calc_id1’; but it is returning null. I am not sure, what’s wrong here but I can confirm that the rect element is updated with the new id. Any clue or answer will be of great help to me.

Please note that I am using IE9.

changeID( xmlDoc, "//g[@id='temp1']", "calc_id1");

function changeID( xmlDoc, xPath, newIdValue ) {
    var node = xmlDoc.selectSingleNode(xPath);
    if (node!=null){
            var oAttr = node.attributes.getNamedItem( "id");
            if (oAttr!=null){
                 oAttr.text = newIdValue;
            }
            return node;
    }
    else {
            return null;
    }
}

Answer 1

It seems that getElementById() did not find the newly added elements because they were not recognized as svg element; they were missing the svg namespace in it. Once I added the namespace, it worked. Pleas see this answer for more details.