此外，目前 Firefox 要求 svg 元素具有宽度和高度属性，以便呈现到画布.将来可能会取消此限制.Phrogz 正如我在上面的评论中所指出的，我收到了独立确认，Chrome 中的安全问题是同一个问题:Chrome(当前)在绘制 SVG 文档时总是污染画布.In order to answer this question properly I thought that I would:Convert an in-document SVG file to a data URLLoad it into an <img>Draw that <img> to a <canvas>Convert that <canvas> to a PNG data URLLoad that data URL into an image.I have an example of this attempt here:http://phrogz.net/SVG/svg_to_png.xhtmlIn Firefox I get (NS_ERROR_NOT_AVAILABLE) [nsIDOMCanvasRenderingContext2D.drawImage] when attempting to draw the image to the canvas in step 3.Why do I get this error in Firefox, or how do I work around it?In Chrome I get a SECURITY_ERR exception when I try to call toDataURL() in step 4.Why would I get this error in Chrome, or how do I work around it?The WhatWG specs state that the origin for an image "generated from a data: URL found in another Document or in a script" should be the same as that document. All data in this test is from the same document. 解决方案 In Firefox, SVG images taint the canvas but we're working on removing that restriction in https://bugzilla.mozilla.org/show_bug.cgi?id=672013 when that bug lands what you're trying to do should be possible. This restriction has been removed in FFv12.All browsers implement similar restrictions and all are working on removing them; generally by making what you can do in SVG images more restricted. For instance we don't want to get back to the bad old days of being able to work out what sites you've visited by creating an SVG image with links in it and then reading off the colour of the links using canvas.In addition at the moment firefox requires that the svg element have width and height attributes in order to render to canvas. This restriction may be removed in future.Edit by Phrogz: as noted in my comment above, I received independent confirmation that the security issue in Chrome is the same issue: Chrome (currently) always taints a canvas when an SVG document is drawn to it. 这篇关于将文档中的 SVG 栅格化为 Canvas的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！
