blocks|key|1138069|text|正如西蒙上面所说的，使用drawImage应该是行不通的。但是，使用canvg库和：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1138070|var+c+=+document.getElementById('canvas');
var+ctx+=+c.getContext('2d');
ctx.drawSvg(SVG_XML_OR_PATH_TO_SVG,+dx,+dy,+dw,+dh);|code-block|syntax|javascript|1138071|这来自西蒙上面提供的链接，其中有许多其他建议，并指出您希望链接到或下载canvg.js和rgbcolor.js。它们允许您在JavaScript函数中通过URL或使用SVG标记之间的内联SVG代码来操作和加载svg。|1138072|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/canvg/canvg^0|Y|5|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]]|C|$]]|$1|D|3|E|5|F|7|W|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|X|8|@]|9|@]|C|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]]]

<p>As Simon says above, using drawImage shouldn't work. But, using the <a href="https://github.com/canvg/canvg" rel="nofollow noreferrer">canvg</a> library and:</p>

<pre><code>var c = document.getElementById('canvas');
var ctx = c.getContext('2d');
ctx.drawSvg(SVG_XML_OR_PATH_TO_SVG, dx, dy, dw, dh);
</code></pre>

<p>This comes from the link Simon provides above, which has a number of other suggestions and points out that you want to either link to, or download canvg.js and rgbcolor.js. These allow you to manipulate and load an SVG, either via URL or using inline SVG code between svg tags, within JavaScript functions.  </p>


blocks|key|1138106|text|Mozilla有一种在画布上绘制SVG的简单方法，称为"Drawing+DOM+objects+into+a+canvas“。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1138107|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/HTML/Canvas/Drawing_DOM_objects_into_a_canvas^0|S|X|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

<p>Mozilla has a simple way for drawing SVG on canvas called "<a href="https://developer.mozilla.org/en-US/docs/HTML/Canvas/Drawing_DOM_objects_into_a_canvas" rel="nofollow">Drawing DOM objects into a canvas</a>"</p>


blocks|key|923679|text|继续@Matyas的回答:如果svg的图像也是base64格式的，它将被绘制到输出。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|923680|演示：|923681|​|923682|var+svg+=+document.querySelector('svg');
var+img+=+document.querySelector('img');
var+canvas+=+document.querySelector('canvas');

//+get+svg+data
var+xml+=+new+XMLSerializer().serializeToString(svg);

//+make+it+base64
var+svg64+=+btoa(xml);
var+b64Start+=+'data:image/svg%2Bxml;base64,';

//+prepend+a+"header"
var+image64+=+b64Start+%2B+svg64;

//+set+it+as+the+source+of+the+img+element
img.onload+=+function()+{
++++//+draw+the+image+onto+the+canvas
++++canvas.getContext('2d').drawImage(img,+0,+0);
}
img.src+=+image64;|code-block|syntax|javascript|923683|svg,+img,+canvas+{
++display:+block;
}|923684|SVG
<svg+height="40"+width="40">
++<rect+width="40"+height="40"+style="fill:rgb(255,0,255);"+/>
++<image+xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAEX0lEQVQ4jUWUyW6cVRCFv7r3/kO3u912nNgZgESAAgGBCJgFgxhW7FkgxAbxMLwBEmIRITbsQAgxCEUiSIBAYIY4g1EmYjuDp457%2BLv7n%2B4tFjbwAHVOnVPnlLz75ht67OhhZg/M0p6d5tD9C8SNBBs5XBJhI4uNLC4SREA0UI9yJr2c4e6QO%2Bv3WF27w%2BrmNrv9Pm7hxDyHFg5yYGEOYxytuRY2SYiSCIwgRgBQIxgjEAKuZWg6R9S0SCS4qKLZElY3HC5tp7QPtmlMN7HOETUTXBJjrEGsAfgPFECsQbBIbDGJZUYgGE8ugQyPm%2Bo0STtTuGZMnKZEjRjjLIgAirEOEQEBDQFBEFFEBWLFtVJmpENRl6hUuFanTRAlbTeZarcx0R6YNZagAdD/t5N9%2BQgCYAw2jrAhpjM3zaSY4OJGTDrVwEYOYw2qioigoviq5MqF31m9fg1V5fCx%2Bzn11CLNVnufRhBrsVFE1Ihpthu4KDYYwz5YQIxFBG7duMZnH31IqHL6wwnGCLFd4pez3/DaG2/x4GNPgBhEZG/GGlxkMVFkiNMYay3Inqxed4eP33uf7Y0uu90xWkGolFAru7sZn5w5w921m3u%2Bsu8vinEO02hEWLN/ANnL2rkvv2an2yd4SCKLM0JVBsCgAYZZzrnPP0eDRzXgfaCuPHXwuEYjRgmIBlQVVLl8/hKI4fRzz3L6uWe5%2BPMvnHz6aa4uX%2BD4yYe5vXaLH86eoyoLjLF476l9oKo9pi5HWONRX8E%2BYznOef7Vl1h86QWurlwjbc%2BQpikPPfoIcZLS39pmMikp8pzae6q6oqgriqrGqS%2BxeLScoMYSVJlfOMTl5RXW1%2B5w5fJVnFGWf1/mxEMnWPppiclkTLM5RdJoUBYFZVlQ5DnZMMMV167gixKLoXXsKGqnOHnqOJ/%2B/CfZ%2BXUiZ0jTmFv5mAvf/YjEliQ2vPD8Ir6qqEcZkzt38cMRo5WruFvfL9FqpyRxQhj0qLOax5I2S08%2BTu/lFiGUGOPormxwuyfMnjrGrJa88uIixeYWl776lmrzNjmw8vcG8sU7ixpHMXFsCUVg9tABjEvRgzP82j7AhbyiX5Qcv2%2BBvy7dYGZ1k7efeQB/Y4PBqGBtdYvb3SFzLcfqToZc/OB1zYeBSpUwLBlvjZidmWaSB1yaYOfn6LqI/r0hyU6P%2BcRSlhXjbEI2zvnt7y79oqQ3qeg4g6vKjCIXehtDmi6m0UnxVnCRkPUHVNt9qkLJxgXOCYNOg34v48raPaamU2o89/KKsQ9sTSpc0JK7NwdcX8s43Ek5cnSOLC/Z2R6Rj0ra0w2W1/t0xyWn51uk2Ri1QtSO6OU5d7OSi72cQeWxKG7p/Dp//JXTy6C1Pcbc6DMpPRtjTxChEznWhwVZUCKrjCrPoPDczHLmnLBdBgZlRRWUEBR3ZKrme5TlrTGlV440Y1IrXM9qQGi6mkG5V6uza7tUIeCDElTZ1L26elX%2BfcH/ACJBPYTJ4X8tAAAAAElFTkSuQmCC"+height="20px"+width="20px"+x="10"+y="10"></image></svg><br/>

IMAGE+
<img/><br/>
+++
CANVAS+
<canvas></canvas><br/>|923685|923686|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|T|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|U|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|H|7|V|8|@]|9|@]|A|$I|J]]|$1|M|3|N|5|H|7|W|8|@]|9|@]|A|$I|J]]|$1|O|3|E|5|6|7|X|8|@]|9|@]|A|$]]|$1|P|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|Q|$]]

<p>Further to @Matyas answer: if the svg's image is also in base64, it will be drawn to the output.</p>
<h2>Demo:</h2>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var svg = document.querySelector('svg');
var img = document.querySelector('img');
var canvas = document.querySelector('canvas');

// get svg data
var xml = new XMLSerializer().serializeToString(svg);

// make it base64
var svg64 = btoa(xml);
var b64Start = 'data:image/svg+xml;base64,';

// prepend a "header"
var image64 = b64Start + svg64;

// set it as the source of the img element
img.onload = function() {
    // draw the image onto the canvas
    canvas.getContext('2d').drawImage(img, 0, 0);
}
img.src = image64;</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>svg, img, canvas {
  display: block;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>SVG
&lt;svg height="40" width="40"&gt;
  &lt;rect width="40" height="40" style="fill:rgb(255,0,255);" /&gt;
  &lt;image xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAEX0lEQVQ4jUWUyW6cVRCFv7r3/kO3u912nNgZgESAAgGBCJgFgxhW7FkgxAbxMLwBEmIRITbsQAgxCEUiSIBAYIY4g1EmYjuDp457+Lv7n+4tFjbwAHVOnVPnlLz75ht67OhhZg/M0p6d5tD9C8SNBBs5XBJhI4uNLC4SREA0UI9yJr2c4e6QO+v3WF27w+rmNrv9Pm7hxDyHFg5yYGEOYxytuRY2SYiSCIwgRgBQIxgjEAKuZWg6R9S0SCS4qKLZElY3HC5tp7QPtmlMN7HOETUTXBJjrEGsAfgPFECsQbBIbDGJZUYgGE8ugQyPm+o0STtTuGZMnKZEjRjjLIgAirEOEQEBDQFBEFFEBWLFtVJmpENRl6hUuFanTRAlbTeZarcx0R6YNZagAdD/t5N9+QgCYAw2jrAhpjM3zaSY4OJGTDrVwEYOYw2qioigoviq5MqF31m9fg1V5fCx+zn11CLNVnufRhBrsVFE1Ihpthu4KDYYwz5YQIxFBG7duMZnH31IqHL6wwnGCLFd4pez3/DaG2/x4GNPgBhEZG/GGlxkMVFkiNMYay3Inqxed4eP33uf7Y0uu90xWkGolFAru7sZn5w5w921m3u+su8vinEO02hEWLN/ANnL2rkvv2an2yd4SCKLM0JVBsCgAYZZzrnPP0eDRzXgfaCuPHXwuEYjRgmIBlQVVLl8/hKI4fRzz3L6uWe5+PMvnHz6aa4uX+D4yYe5vXaLH86eoyoLjLF476l9oKo9pi5HWONRX8E+YznOef7Vl1h86QWurlwjbc+QpikPPfoIcZLS39pmMikp8pzae6q6oqgriqrGqS+xeLScoMYSVJlfOMTl5RXW1+5w5fJVnFGWf1/mxEMnWPppiclkTLM5RdJoUBYFZVlQ5DnZMMMV167gixKLoXXsKGqnOHnqOJ/+/CfZ+XUiZ0jTmFv5mAvf/YjEliQ2vPD8Ir6qqEcZkzt38cMRo5WruFvfL9FqpyRxQhj0qLOax5I2S08+Tu/lFiGUGOPormxwuyfMnjrGrJa88uIixeYWl776lmrzNjmw8vcG8sU7ixpHMXFsCUVg9tABjEvRgzP82j7AhbyiX5Qcv2+Bvy7dYGZ1k7efeQB/Y4PBqGBtdYvb3SFzLcfqToZc/OB1zYeBSpUwLBlvjZidmWaSB1yaYOfn6LqI/r0hyU6P+cRSlhXjbEI2zvnt7y79oqQ3qeg4g6vKjCIXehtDmi6m0UnxVnCRkPUHVNt9qkLJxgXOCYNOg34v48raPaamU2o89/KKsQ9sTSpc0JK7NwdcX8s43Ek5cnSOLC/Z2R6Rj0ra0w2W1/t0xyWn51uk2Ri1QtSO6OU5d7OSi72cQeWxKG7p/Dp//JXTy6C1Pcbc6DMpPRtjTxChEznWhwVZUCKrjCrPoPDczHLmnLBdBgZlRRWUEBR3ZKrme5TlrTGlV440Y1IrXM9qQGi6mkG5V6uza7tUIeCDElTZ1L26elX+fcH/ACJBPYTJ4X8tAAAAAElFTkSuQmCC" height="20px" width="20px" x="10" y="10"&gt;&lt;/image&gt;&lt;/svg&gt;&lt;br/&gt;

IMAGE 
&lt;img/&gt;&lt;br/&gt;
   
CANVAS 
&lt;canvas&gt;&lt;/canvas&gt;&lt;br/&gt;</code></pre>
</div>
</div>
</p>


<p>Is there a default way of drawing an SVG file onto a HTML5 canvas? Google Chrome supports loading the SVG as an image (and simply using <code>drawImage</code>), but the developer console does warn that <code>resource interpreted as image but transferred with MIME type image/svg+xml</code>.</p>

<p>I know that a possibility would be to convert the SVG to canvas commands (like in <a href="https://stackoverflow.com/questions/2907537/is-there-a-way-to-convert-svg-files-to-html5s-canvas-compatible-commands">this question</a>), but I'm hoping that's not needed. I don't care about older browsers (so if FireFox 4 and IE 9 will support something, that's good enough).</p>


Drawing an SVG file on a HTML5 canvas

HTML5

在HTML5画布上绘制SVG文件有没有默认的方法？Google Chrome支持将SVG作为图像加载(并简单地使用drawImage)，但开发人员控制台确实会警告该resource interpreted as image but transferred with MIME type image/svg+xml。我知道...

问在HTML5画布上绘制SVG文件
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在HTML5画布上绘制SVG文件EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在HTML5画布上绘制SVG文件
EN