Creating SVG with Javascript

I am trying to create svg using javascript. Here is 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 is 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 is not displayed. Here is an example:

http://jsfiddle.net/w0L62rgw/

Why is this not working?

+4
source share

Source: https://habr.com/ru/post/1607962/


All Articles