0

I am trying to draw an SVG which is appended in my DOM on a dynamically created HTML 5 canvas

But cant able to draw it. Find the sample in the below link http://jsplayground.syncfusion.com/Sync_wnoo553d

But the SVG is not draw on the canvas. If draw any SVG/image from a URL, it is drawn fine. But not working only when drawn a DOM element dynamically.

My code snippet is

var img = new Image();         // draw svg on canvas             
 img.onload = function () {
    exprtCtx.drawImage(img, 0, 0);
  };
 img.src = svg;

Where svg is the variable holding the SVG element in DOM.

Guide me to resolve this. Thanks in advance.

Jaya
  • 27
  • 1
  • 10
  • How are you constructing the DOM element. – Robert Longson Feb 24 '16 at 09:20
  • I am creating a SVG element dynamically with required attributes and appending it to the body of the document . Kindly have a look at the attached sample link. So that you can be clear. – Jaya Feb 24 '16 at 09:25
  • Code should be in the question and not elsewhere. Most links are blocked form my current location for instance. – Robert Longson Feb 24 '16 at 09:28
  • I run you code from jsplayground in chrome & it seems to work? – user3094755 Oct 19 '16 at 05:13
  • 1
    "*svg is the variable holding the SVG element in DOM*" like `svg = document.querySelector('svg')` ? That won't work. Ultimately, that will make your `img.src` set to `"[object SVGSVGElement]"` which obvioulsy won't do any good. You'll have to serialize your DOM element to a string an then make it a valid dataURI (or blobURI depending on the method you choose) before using it as an url. This [Q/A](http://stackoverflow.com/questions/27230293/how-to-convert-svg-to-png-using-html5-canvas-javascript-jquery-and-save-on-serve/33227005) shows you how to do it. – Kaiido Oct 19 '16 at 05:43
  • Possible duplicate of [How to convert svg to png using html5 canvas/javascript/jquery and save on server](https://stackoverflow.com/questions/27230293/how-to-convert-svg-to-png-using-html5-canvas-javascript-jquery-and-save-on-serve) – Paul Sweatte Sep 28 '17 at 06:07

0 Answers0