I'm experimenting with interactive images. I've a jquery-ui slider bound to a function which updates the path inside an svg document (embedded in a web page).

I'm trying to retrieve the path with:

document.getElementsByTagName('svg')[0].getElementById('me').setAttribute('d', "M 30 30 ...)

This is working fine in Chrome and Safari, but not in Firefox (where I have to use getElementsByClassName(..)[0]. Is there something I'm missing, or is id as attribute not allowed in an svg document?

BTW I checked on the last release of Firefox 8.0

Just saw now an message in the console:

Component returned failure code: 0x80004001 (NS_ERROR_NOT_IMPLEMENTED) [nsIDOMSVGSVGElement.getElementById]

Would have been nice if this was indicated as a normal script error.

As per first ment (i'm using id's the proper way):

<svg xmlns="" version="1.1" height="370"  width="400" baseProfile="full" viewbox="0 0 1000 1000">

  <g stroke="black" stroke-width="8" fill="black" transform="scale(4)">
  <path id="me" d="" class="classme"/>
  </g>
</svg>

I'm experimenting with interactive images. I've a jquery-ui slider bound to a function which updates the path inside an svg document (embedded in a web page).

I'm trying to retrieve the path with:

document.getElementsByTagName('svg')[0].getElementById('me').setAttribute('d', "M 30 30 ...)

This is working fine in Chrome and Safari, but not in Firefox (where I have to use getElementsByClassName(..)[0]. Is there something I'm missing, or is id as attribute not allowed in an svg document?

BTW I checked on the last release of Firefox 8.0

Just saw now an message in the console:

Component returned failure code: 0x80004001 (NS_ERROR_NOT_IMPLEMENTED) [nsIDOMSVGSVGElement.getElementById]

Would have been nice if this was indicated as a normal script error.

As per first ment (i'm using id's the proper way):

<svg xmlns="http://www.w3/2000/svg" version="1.1" height="370"  width="400" baseProfile="full" viewbox="0 0 1000 1000">

  <g stroke="black" stroke-width="8" fill="black" transform="scale(4)">
  <path id="me" d="" class="classme"/>
  </g>
</svg>

• javascript
• firefox
• svg

Share Improve this question Follow edited Nov 9, 2011 at 14:09 dr jerry asked Nov 9, 2011 at 12:45 dr jerrydr jerry 10k2525 gold badges8585 silver badges127127 bronze badges 1

• Perhaps the following link helps? codingforums./showthread.php?t=94475 – Ben van Gompel Commented Nov 9, 2011 at 12:52

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

I've just implemented svg.getElementById in Firefox. It will appear in Firefox 11.

If you dont mind using jQuery, I have just tested with version 1.7.1 and svg dom traversal seems to work just perfectly:

$("svg:first").find("#me").attr("d", "M 30 30 ...");

Element nodes don't have getElementById method. This is understandable as ID should be unique across the whole document. Use document.getElementById('me').

Note that Firefox doesn't support getElementById even on HTML elements (means that no mon method Element.prototype.getElementById exists; there's just HTMLDocument.prototype.getElementById).