Search code examples
javascriptjqueryhtmlhtml5-canvasjquery-svg

HTML5 Canvas in SVG element with jQuery

I need to insert a canvas into an SVG element. I need a canvas in SVG because I am using d3js which uses SVG and jquery sparklines which creates a canvas. Is there any way to make the sparklines graph part of the svg element? I tried to draw a graph with sparklines in SVG but returns a c.innerHTML is undefined.

Thanks!

Solution

  • Please refer to Phrogz comment below the question. I am just putting it as the answer to close the thread. The answer to my problem was that I needed a element in my SVG to put place a html tag such as a div. The div was required for the canvas that sparkline generates.

    So I just had to add this

    svgObj.append("foreignObject")
  .attr("width", "20")
  .attr("height", "20")
  .append("xhtml:div");

    Then for sparkline I just pointed it to the foreign object's div and now I have a canvas in a SVG :)

    Thanks Progz!