对于SVG,是否有相当于canvas的toDataURL方法？

Question

我试图加载到画布像素处理我需要一种方法像SVG图像toDataURL或getImageData对SVG

在Chrome/Safari上,我可以尝试通过图像和画布

var img = new Image()
img.onload = function(){
  ctx.drawImage(img,0,0) //this correctly draws the svg image to the canvas! however...
  var dataURL = canvas.toDataURL(); //SECURITY_ERR: DOM Exception 18
  var data = ctx.getImageData(0,0,img.width, img.height).data //also SECURITY_ERR: DOM Exception 18
  }
  img.src = "image.svg" //that is an svg file. (same domain as html file :))

但是我遇到了安全错误.还有其他方法吗？

这是一个问题的现场演示http://clstff.appspot.com/gist/462846(你可以查看源代码)

Answer 1

var dataUrl = 'data:image/svg+xml,'+encodeURIComponent(svgString);

Answer 2

来自:http://www.svgopen.org/2009/papers/12-Using_Canvas_in_SVG/#d4e105

你不能使用SVG图像元素作为drawImage方法的源的原因很简单,但很痛苦:当前的Canvas规范(还)不允许引用SVGImageElement作为drawImage的源,并且只能处理HTMLImageElement,HTMLCanvasElement和HTMLVideoelement.希望在定义"HTML5中的SVG"行为的过程中解决这个不足之处,并且可以扩展为允许SVGSVGElement.清单3中的xhtml:img元素使用visibility:hidden,因为我们不希望它干扰Canvas上的可见副本.