jquery s append not working with svg element

Question

Assuming this    lt html gt   lt head gt    lt script type  text javascript  src  jquery js  gt  lt  script gt    lt script type  text javascript  gt     document  ready function         svg   append   lt circle cx  100  cy  50  r  40  stroke  black  stroke-width  2  fill  red   gt            lt  script gt   lt  head gt   lt body gt    lt svg xmlns svg  http   www w3 org 2000 svg  xmlns  http   www w3 org 2000 svg  viewBox  0 0 200 100  width  200px  height  100px  gt    lt  svg gt   lt  body gt    Why don t I see anything

User · Answer

If the string you need to append is SVG and you add the proper namespace  you can parse the string as XML and append to the parent   var xml   jQuery parseXML   lt circle xmlns  http   www w3 org 2000 svg  cx  100  cy  50  r  40  stroke  black  stroke-width  2  fill  red   gt        svg   append xml documentElement

User · Answer

This is working for me today with FF 57   function             JQuery  today  doesn t play well with adding SVG elements - tricks required       selector to node in svg doc  parent   prepend   this  clone   text  Your           selector to node in svg doc  text  New   attr  x    340   text  New            attr  stroke    blue   attr  style    text-decoration  line-through        Makes

User · Answer

When you pass a markup string into    it s parsed as HTML using the browser s innerHTML property on a  lt div gt   or other suitable container for special cases like  lt tr gt    innerHTML can t parse SVG or other non-HTML content  and even if it could it wouldn t be able to tell that  lt circle gt  was supposed to be in the SVG namespace   innerHTML is not available on SVGElement   it is a property of HTMLElement only  Neither is there currently an innerSVG property or other way    to parse content into an SVGElement  For this reason you should use DOM-style methods  jQuery doesn t give you easy access to the namespaced methods needed to create SVG elements  Really jQuery isn t designed for use with SVG at all and many operations may fail   HTML5 promises to let you use  lt svg gt  without an xmlns inside a plain HTML  text html  document in the future  But this is just a parser hack      the SVG content will still be SVGElements in the SVG namespace  and not HTMLElements  so you ll not be able to use innerHTML even though they look like part of an HTML document   However  for today s browsers you must use XHTML  properly served as application xhtml xml  save with the  xhtml file extension for local testing  to get SVG to work at all   It kind of makes sense to anyway  SVG is a properly XML-based standard   This means you d have to escape the  lt  symbols inside your script block  or enclose in a CDATA section   and include the XHTML xmlns declaration  example    lt  DOCTYPE html gt   lt html xmlns  http   www w3 org 1999 xhtml  gt  lt head gt   lt  head gt  lt body gt       lt svg id  s  xmlns  http   www w3 org 2000 svg   gt       lt script type  text javascript  gt          function makeSVG tag  attrs                var el  document createElementNS  http   www w3 org 2000 svg   tag               for  var k in attrs                  el setAttribute k  attrs k                return el                     var circle  makeSVG  circle    cx  100  cy  50  r 40  stroke   black    stroke-width   2  fill   red             document getElementById  s   appendChild circle           circle onmousedown  function                 alert  hello                    lt  script gt   lt  body gt  lt  html gt       well  there s DOM Level 3 LS s parseWithContext  but browser support is very poor  Edit to add  however  whilst you can t inject markup into an SVGElement  you could inject a new SVGElement into an HTMLElement using innerHTML  then transfer it to the desired target  It ll likely be a bit slower though    lt script type  text javascript  gt  lt   CDATA      function parseSVG s            var div  document createElementNS  http   www w3 org 1999 xhtml    div            div innerHTML    lt svg xmlns  http   www w3 org 2000 svg  gt   s   lt  svg gt            var frag  document createDocumentFragment            while  div firstChild firstChild              frag appendChild div firstChild firstChild           return frag             document getElementById  s   appendChild parseSVG            lt circle cx  100  cy  50  r  40  stroke  black  stroke-width  2  fill  red  onmousedown  alert   hello       gt              gt  lt  script gt        I hate the way the authors of HTML5 seem to be scared of XML and determined to shoehorn XML-based features into the crufty mess that is HTML  XHTML solved these problems years ago

User · Answer

Based on  chris-dolphin  s answer but using helper function      Creates svg element  returned as jQuery object function  s elem      return   document createElementNS  http   www w3 org 2000 svg   elem       var  svg    s  svg    var  circle    s  circle   attr          svg append  circle

User · Answer

I haven t seen someone mention this method but document createElementNS   is helpful in this instance   You can create the elements using vanilla Javascript as normal DOM nodes with the correct namespace and then jQuery-ify them from there  Like so   var svg   document createElementNS  http   www w3 org 2000 svg    svg        circle   document createElementNS  http   www w3 org 2000 svg    circle     var  circle     circle  attr     All your attributes        svg  append  circle     The only down side is that you have to create each SVG element with the right namespace individually or it won t work

User · Answer

The accepted answer by Bobince is a short  portable solution  If you need to not only append SVG but also manipulate it  you could try the JavaScript library  Pablo   I wrote it   It will feel familiar to jQuery users   Your code example would then look like     document  ready function        Pablo  svg   append   lt circle cx  100  cy  50  r  40  stroke  black  stroke-width  2  fill  red   gt           You can also create SVG elements on the fly  without specifying markup   var circle   Pablo circle       cx 100      cy 50      r 40    appendTo  svg

User · Answer

The accepted answer shows too complicated way  As Forresto claims in his answer   it does seem to add them in the DOM explorer  but not on the screen  and the reason for this is different namespaces for html and svg   The easiest workaround is to  refresh  whole svg  After appending circle  or other elements   use this      body   html    body   html       This does the trick  The circle is on the screen   Or if you want  use a container div       cont   html     cont   html       And wrap your svg inside container div    lt div id  cont  gt       lt svg xmlns svg  http   www w3 org 2000 svg  xmlns  http   www w3 org 2000 svg  viewBox  0 0 200 100  width  200px  height  100px  gt       lt  svg gt   lt  div gt    The functional example  http   jsbin com ejifab 1 edit  The advantages of this technique        you can edit existing svg  that is already in DOM   eg  created using Raphael or like in your example  hard coded  without scripting      you can add complex element structures as strings eg     svg   prepend   lt defs gt  lt marker gt  lt  marker gt  lt mask gt  lt  mask gt  lt  defs gt     like you do in jQuery      after the elements are appended and made visible on the screen using         cont   html     cont   html     their attributes can be edited using jQuery          EDIT   The above technique works with  hard coded  or DOM manipulated     document createElementNS etc   SVG only  If Raphael is used for creating elements   according to my tests  the linking between Raphael objects and SVG DOM is broken if     cont   html     cont   html     is used  The workaround to this is not to use     cont   html     cont   html     at all and instead of it use dummy SVG document   This dummy SVG is first a textual representation of SVG document and contains only elements that are needed  If we want eg  to add a filter element to Raphael document  the dummy could be something like  lt svg id  dummy  style  display none  gt  lt defs gt  lt filter gt  lt  -- Filter definitons -- gt  lt  filter gt  lt  defs gt  lt  svg gt   The textual representation is first converted to DOM using jQuery s    body   append   method  And when the  filter  element is in DOM  it can be queried using standard jQuery methods and appended to the main SVG document which is created by Raphael   Why this dummy is needed  Why not to add a filter element strictly to Raphael created document  If you try it using eg     svg   append   lt circle       gt     it is created as html element and nothing is on screen as described in answers  But if the whole SVG document is appended  then the browser handles automatically the namespace conversion of all the elements in SVG document    An example enlighten the technique      Add Raphael SVG document to container element var p   Raphael  cont   200  200      Add id for easy access   p canvas  attr  id   p       Textual representation of element s  to be added var f     lt filter id  myfilter  gt  lt  -- filter definitions -- gt  lt  filter gt        Create dummy svg with filter definition     body   append   lt svg id  dummy  style  display none  gt  lt defs gt     f     lt  defs gt  lt  svg gt        Append filter definition to Raphael created svg     p defs   append     dummy filter        Remove dummy     dummy   remove        Now we can create Raphael objects and add filters to them  var r   p rect 10 10 100 100     r node  attr  filter   url  myfilter       Full working demo of this technique is here  http   jsbin com ilinan 1 edit     I have  yet  no idea  why     cont   html     cont   html     doesn t work when using Raphael  It would be very short hack

User · Answer

A much simpler way is to just generate your SVG into a string  create a wrapper HTML element and insert the svg string into the HTML element using      wrapperElement   html svgString   This works just fine in Chrome and Firefox

User · Answer

var svg     if you have variable declared and not assigned value      then you make a mistake by appending elements to that before creating element      svg appendChild document createElement  g         at some point you assign to svg  svg   document createElementNS  http   www w3 org 2000 svg    svg       then you put it in DOM  document getElementById  myDiv   appendChild svg      it wont render unless you manually change myDiv DOM with DevTools     to fix assign before you append var svg   createElement  svg           version    1 2          xmlns xlink    http   www w3 org 1999 xlink          aria-labelledby    title          role    img          class    graph       function createElement tag  attributeArr              createElementNS  NS is must  Does not draw without       let elem   document createElementNS  http   www w3 org 2000 svg   tag                      attributeArr forEach element   gt  elem setAttribute element 0   element 1           return elem       extra   lt circle gt  for example requires attributes to render  Check if missing

User · Answer

The increasingly popular D3 library handles the oddities of appending manipulating svg very nicely   You may want to consider using it as opposed to the jQuery hacks mentioned here   HTML   lt svg xmlns  http   www w3 org 2000 svg  gt  lt  svg gt    Javascript  var circle   d3 select  svg   append  circle        attr  r    10        attr  style    fill white stroke black stroke-width 5

User · Answer

I would suggest it might be better to use ajax and load the svg element from another page       container   load href      svg element      Where href is the location of the page with the svg  This way you can avoid any jittery effects that might occur from replacing the html content  Also  don t forget to unwrap the svg after it s loaded       svg element   unwrap

User · Answer

JQuery can t append elements to  lt svg gt   it does seem to add them in the DOM explorer  but not on the screen     One workaround is to append an  lt svg gt  with all of the elements that you need to the page  and then modify the attributes of the elements using  attr        body      append     lt svg gt  lt circle id  c  cx  10  cy  10  r  10  fill  green    gt  lt  svg gt        mousemove  function  e              c   attr             cx  e pageX            cy  e pageY                   http   jsfiddle net 8FBjb 1

User · Answer

I can see circle in firefox  doing 2 things   1  Renaming file from html to xhtml   2  Change script to    lt script type  text javascript  gt    document  ready function        var obj   document createElementNS  http   www w3 org 2000 svg    circle        obj setAttributeNS null   cx   100       obj setAttributeNS null   cy   50       obj setAttributeNS null   r    40       obj setAttributeNS null   stroke    black        obj setAttributeNS null   stroke-width   2       obj setAttributeNS null   fill    red           svg   0  appendChild obj        lt  script gt

User · Answer

Found an easy way which works with all browsers I have  Chrome 49  Edge 25  Firefox 44  IE11  Safari 5  Win   Safari 8  MacOS       x000D   x000D     Clean svg content  if you want to update the svg s objects  x000D     Note    html     doesn t works for svg in some browsers x000D      svgObject   empty    x000D     add some objects x000D      svgObject   append   lt polygon class  svgStyle  points  10 10 50 10 50 50 10 50 10 10    gt     x000D      svgObject   append   lt circle class  svgStyle  cx  100  cy  30  r  25   gt     x000D   x000D     Magic happens here  refresh DOM  you must refresh svg s parent for Edge IE and Safari  x000D      svgContainer   html     svgContainer   html     x000D   svgStyle x000D    x000D    fill cornflowerblue  x000D    fill-opacity 0 2  x000D    stroke-width 2  x000D    stroke-dasharray 5 5  x000D    stroke black  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   x000D   lt div id  svgContainer  gt  x000D     lt svg id  svgObject  height  100  width  200  gt  lt  svg gt  x000D   lt  div gt  x000D   x000D   lt span gt It works if two shapes  one square and one circle  are displayed above  lt  span gt  x000D   x000D   x000D

[jquery] jquery's append not working with svg element?

Examples related to jquery

Examples related to html

Examples related to svg