4

I'm trying to generate an svg using javascript. Here's my html SVG:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 50 50" style="width: 50px;">
  <ellipse cx="26" cy="26" rx="12" ry="16" fill="#ED1F24"/>
</svg>

Now here's the same SVG recreated with jquery:

var svgContainer = $('<SVG/>',{
    "version":"1.1",
    "xmlns":"http://www.w3.org/2000/svg",
    "xmlns:xlink":"http://www.w3.org/1999/xlink",
    "viewBox":"0 0 50 50",
    "width":"50px"
});

var ellipse = $('<ELLIPSE/>',{
    "cx":"26",
    "cy":"26",
    "rx":"12",
    "ry":"16",
    "fill":"#ED1F24"
}).appendTo(svgContainer);

svgContainer.appendTo($('body'))

The html output is identical but the generated svg doesn't appear. Here's an example:

http://jsfiddle.net/w0L62rgw/

Why doesn't it work?

Matt Coady
  • 3,418
  • 5
  • 38
  • 63
  • One word: namespaces. Creating a namespaced element is not the same as creating a default-namespace element and slapping a namespace attribute onto it. You need to use `document.createElementNS()`; jQuery can't do it. There is a [jQuery SVG](http://keith-wood.name/svg.html) project that does it for you, but I am not sure how maintained it is. – Amadan Sep 18 '15 at 06:03
  • The problem is you're generating svg using **jqueery**, creating svg using **javascript** is a little more complex (not much though), and has the benefit of actually working. – Jaromanda X Sep 18 '15 at 06:13
  • 1
    You can do this using jQuery. Try [this](http://jsfiddle.net/rejithrkrishnan/w0L62rgw/1/) your issue is fixed here. – rrk Sep 18 '15 at 06:32

0 Answers0