6

I'm trying to use document.createElement('circle') to work with svgs but Chrome creates a end tag to circle giving

<circle></circle>

which results of an error. How can I create an element without an ending that?

SBSTP
  • 3,479
  • 6
  • 30
  • 41
  • Why don't you want an end tag? – Mrchief Aug 09 '11 at 21:14
  • Because the end tag causes chrome to not display the circle... – SBSTP Aug 09 '11 at 21:16
  • 2
    End tags are never optional (unless you are using self-closing tag syntax) for XML elements … and noting will generate an end tag when you use `createElement`. The parser turns an XML document into a DOM (where there are only nodes, not tags). You can manipulate it all you like. If you turn it back into an XML document, **then** you get tags. – Quentin Aug 09 '11 at 21:24

3 Answers3

8

You might want to take a look at this article

SVG Scripting with JavaScript Part 1: Simple Circle

The method you're looking for is:

var circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");

Edit: Credit where credit is due

Stackoverflow: Creating SVG graphics using javascript?

Community
  • 1
  • 1
4

try using document.createElementNS:

var circle = document.createElementNS("http://www.w3.org/2000/svg","circle");
DrStrangeLove
  • 11,227
  • 16
  • 59
  • 72
-2

Try to use :

document.createElementNS('circle')
John3357
  • 1