在Html5中如何用使用SVG对象啊?

在html5的canvas中使用drawImage,把svg对象作为参数传入,无法显示。不知道是不是drawImage不支持这个类型的参数。求解。。。
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>test</title>
  <style>
   svg, canvas { margin:1em }
  </style>
 </head>
 <body>
  <p>
   <svg xmlns="http://www.w3.org/2000/svg" width="100px" height="100px" id="i">
    FAIL
    <circle cx="50px" cy="50px" r="50px" fill="lime"/>
   </svg>
   <canvas width="100" height="100" id="c">FAIL</canvas>
  </p>
  <script>
   var c = document.getElementById("c").getContext("2d"),
       i = document.getElementById("i")
   c.drawImage(i, 0, 0)
  </script>
 </body>
</html>
已邀请:

lvqiang123

赞同来自:

在支持svg的浏览器中进行测试,如Firefox16,Chrome
<html>
<head>
<title>test</title>
<style>
svg, canvas { margin:1em }
</style>
</head>
<body>
<p>
<svg xmlns="http://www.w3.org/2000/svg" width="100px" height="100px" id="i">
FAIL
<circle cx="50px" cy="50px" r="50px" fill="lime"/>
</svg>
<canvas width="100" height="100" id="c">FAIL</canvas>
</p>
<script type="text/javascript">
window.onload = function () {
var ctx = document.getElementById("c").getContext('2d');
var svg_xml = (new XMLSerializer()).serializeToString(document.getElementById("i"));
var img = new Image();
img.src = "data:image/svg+xml;base64," + window.btoa(svg_xml);
img.onload = function () {
ctx.drawImage(img, 0, 0);
};
}
</script>
</body>
</html>

tongshuo1990

赞同来自:

其实我很想知道 drawImage 这个方法的第一个参数 可以接受的图像类型有哪些??

liugaode

赞同来自:

参见方法
http://code.google.com/p/canvg/
http://canvg.googlecode.com/svn/trunk/examples/index.htm

要回复问题请先登录注册