Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

SVG and document.createElement don't work

more options

If you call document.createElement('rect'), and then supply suitable x, y, etc attributes, and then do appendChild to a suitable visible object (usually a <g>), then it should be displayed. |t isn't :-(.

OTOH if there is an existing 'rect', and you take a cloneNode of it, change its x, y, etc attributes and appendChild it, then it appears.

Both these cases work fine in Opera.

See http://clerew.man.ac.uk:7777/web/test.svg for an example, with a text provided by the cloneNode method and a rect (which you won't see) by the createElement method. Click on the circle to see which appears.

If you call document.createElement('rect'), and then supply suitable x, y, etc attributes, and then do appendChild to a suitable visible object (usually a <g>), then it should be displayed. |t isn't :-(. OTOH if there is an existing 'rect', and you take a cloneNode of it, change its x, y, etc attributes and appendChild it, then it appears. Both these cases work fine in Opera. See http://clerew.man.ac.uk:7777/web/test.svg for an example, with a text provided by the cloneNode method and a rect (which you won't see) by the createElement method. Click on the circle to see which appears.

Chosen solution

Use .createElementNS function instead of simple createElement. It works fine.

Read this answer in context 👍 0

All Replies (2)

more options

Chosen Solution

Use .createElementNS function instead of simple createElement. It works fine.

more options

Well yes, it solves it, but it seems a messy way when there is a perefctly good default namespace available from the xmlns in the top-level <svg>. Other browsers (IE and Opera) seem to be able to find that namespace, so I would still maintain that this is a bug in Firefox, rather than a "feature".