2

I am trying to convert/ put an SVG into a canvas using the drawSvg() function. The command is: ctx.drawSvg(SVG_XML_OR_PATH_TO_SVG, dx, dy, dw, dh);. This works fine when I specifically put the svg in as a parameter, for example: ctx.drawSvg('<svg><rect x="0" y="0" width="100" height="100" fill="red" /></svg>', 0 , 0 , 500, 500);, I end up with a canvas that has a red square in it, which is exactly correct. However, I need to be able to take the Svg tag from the document and use that as a parameter. I've tried a few different methods to do this but none of them work. How can I do it? Here is a jsFiddle page with what I am trying to do. Thanks! http://jsfiddle.net/qDmhV/722/

ajm
  • 19,795
  • 3
  • 32
  • 37
yodofizzy
  • 63
  • 2
  • 14

1 Answers1

5

.html() returns an element's innerHTML including leading and trailing whitespace, which drawSvg() chokes on.

Try this (from your fiddle):

ctx.drawSvg($.trim($("#test2").html()), 0 , 0 , 500, 500);

$.trim will remove that whitespace for you.

ajm
  • 19,795
  • 3
  • 32
  • 37