在HTML 5画布上绘制SVG文件?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (152)

是否有一个默认的方式来绘制一个SVG文件到HTML5画布上?Google Chrome浏览器支持将SVG作为图片加载(并简单地使用drawImage),但是开发者控制台会警告这一点resource interpreted as image but transferred with MIME type image/svg+xml

提问于
用户回答回答于

可以使用ctx.drawImage绘制HTMLImageElements 。

var img = new Image();
img.onload = function() {
    ctx.drawImage(img, 0, 0);
}
img.src = "http://upload.wikimedia.org/wikipedia/commons/d/d2/Svg_example_square.svg";

例子。你应该可以在画布上看到一个绿色的方块。页面上的第二个绿色正方形是<svg>插入到DOM中以供参考的相同元素。

你也可以使用新的Path2D对象来绘制SVG(字符串)路径(现在只能在Chrome中运行)。换句话说,你可以写:

var path = new Path2D('M 100,100 h 50 v 50 h 50');
ctx.stroke(path);

例子。

用户回答回答于

办法:

  1. 将SVG的源分配给base 64格式的图像
  2. 将图像绘制到画布上

注意:图像只能在svg中

示范:

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.src = image64;

// draw the image onto the canvas
canvas.getContext('2d').drawImage(img, 0, 0);
svg, img, canvas {
  display: block;
}
SVG

<svg height="40">
  <rect width="40" height="40" style="fill:rgb(255,0,255);" />
  <image xlink:href="https://en.gravatar.com/userimage/16084558/1a38852cf33713b48da096c8dc72c338.png?size=20" height="20px" width="20px" x="10" y="10"></image>
</svg>
<hr/><br/>

IMAGE
<img/>
<hr/><br/>
   
CANVAS
<canvas></canvas>
<hr/><br/>

所属标签

可能回答问题的人

  • 嗨喽你好

    7 粉丝480 提问8 回答
  • uncle_light

    5 粉丝518 提问7 回答
  • Richel

    4 粉丝0 提问6 回答
  • 人生的旅途

    10 粉丝484 提问6 回答

扫码关注云+社区

领取腾讯云代金券