How to use svg object in Html5 canvas. _html/css_WEB-ITnose

Use drawImage in canvas and pass in the svg object as a parameter, but it cannot be displayed. I don’t know if drawImage does not support this type of object parameter. Solve. . .

Reply to discussion (solution)

See method
http://code.google.com/p/canvg/
http://canvg.googlecode .com/svn/trunk/examples/index.htm

I’ll post a piece of code for you:

> ;

" height="100px" id="i">
FAIL

< ;/svg>
FAIL

<script> <br /> var c = document.getElementById("c").getContext("2d"), <br /> i = document.getElementById("i") <br /> c.drawImage(i, 0, 0) <br /> < /script> <br /> <br /> <br /> <br /> Why can’t the canvas draw the svg image? If it can be drawn, what should I do (no third-party stuff is used) ? <p class="sougouAnswer"> Actually, I would like to know what are the acceptable image types for the first parameter of the drawImage method? ? <p class="sougouAnswer"> Test in browsers that support svg, such as Firefox16, Chrome <br /> <pre class='brush:php;toolbar:false;'>&lt;html&gt; &lt;head&gt; &lt;title&gt;test&lt;/title&gt; &lt;style&gt; svg, canvas { margin:1em } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;p&gt; &lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;100px&quot; height=&quot;100px&quot; id=&quot;i&quot;&gt; FAIL &lt;circle cx=&quot;50px&quot; cy=&quot;50px&quot; r=&quot;50px&quot; fill=&quot;lime&quot;/&gt; &lt;/svg&gt; &lt;canvas width=&quot;100&quot; height=&quot;100&quot; id=&quot;c&quot;&gt;FAIL&lt;/canvas&gt; &lt;/p&gt; &lt;script type=&quot;text/javascript&quot;&gt; window.onload = function () { var ctx = document.getElementById(&quot;c&quot;).getContext('2d'); var svg_xml = (new XMLSerializer()).serializeToString(document.getElementById(&quot;i&quot;)); var img = new Image(); img.src = &quot;data:image/svg+xml;base64,&quot; + window.btoa(svg_xml); img.onload = function () { ctx.drawImage(img, 0, 0); }; } &lt;/script&gt; &lt;/body&gt;&lt;/html&gt;</pre> <p class="sougouAnswer"> In fact, I would like to know the acceptable image types for the first parameter of the drawImage method. What are they? ? <br /> <br /> You can use HTMLImageElement, HTMLCanvasElement or HTMLVideoElement as parameters </script>