是否有一种默认方法可以将 SVG 文件绘制到 HTML5 Canvas 上? Google Chrome 支持将 SVG 作为图像加载(并且只需使用 drawImage
),但开发者控制台会警告 resource interpreted as image but transferred with MIME type image/svg+xml
.
我知道有可能将 SVG 转换为 Canvas 命令(如 this question ),但我希望不需要这样做。我不关心旧版浏览器(所以如果 FireFox 4 和 IE 9 支持某些东西,那就足够了)。
最佳答案
编辑:2019 年 12 月
Path2D() all major browsers 支持构造函数现在,“允许在 2D Canvas 表面上声明路径对象”。
编辑:2014 年 11 月
您现在可以使用 ctx.drawImage
绘制具有 .svg
的 HTMLImageElements来源在some but not all browsers (75% 的覆盖率:Chrome、IE11 和 Safari 可以使用,Firefox 可以使用一些错误,但 nightly 已修复它们)。
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";
Live example here .您应该会在 Canvas 中看到一个绿色方 block 。页面上第二个绿色方 block 也是一样<svg>
元素插入 DOM 以供引用。
您还可以使用新的 Path2D 对象绘制 SVG(字符串)路径。换句话说,你可以这样写:
var path = new Path2D('M 100,100 h 50 v 50 h 50');
ctx.stroke(path);
2010 年原始答案:
没有任何原生功能可以让您在 Canvas 中原生使用 SVG 路径。您必须自己转换或使用图书馆为您完成。
我建议查看 canvg:(检查 homepage & demos )
canvg takes the URL to an SVG file, or the text of the SVG file, parses it in JavaScript and renders the result on Canvas.
关于html - 在 HTML5 Canvas 上绘制 SVG 文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3768565/