Html 如何将 SVG 文件转换为 HTML5 的画布？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2907537/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-08-29 03:11:19 来源:igfitidea点击:
How to convert SVG files to HTML5's canvas?
提问by Gabriel A. Zorrilla
Is there a way to convert SVG files to HTML5's canvas compatible commands?
有没有办法将 SVG 文件转换为 HTML5 的画布兼容命令？
采纳答案by Erik Dahlstr?m
There's no 100% solution, but there are script libraries that can convert a subset of svg to canvas, e.g http://code.google.com/p/canvas-svg/. There's also the experimental Path2DAPI that can draw an svg path data string onto the canvas, not sure how well it's supported across browsers though.
没有 100% 的解决方案，但有一些脚本库可以将 svg 的子集转换为画布，例如http://code.google.com/p/canvas-svg/。还有实验性的Path2DAPI，可以在画布上绘制 svg 路径数据字符串，但不确定它在浏览器中的支持情况。
回答by schellmax
canvgseems to be a better solution. It is an active project as of January 2012.
canvg似乎是一个更好的解决方案。截至 2012 年 1 月，这是一个活跃的项目。
canvas-svghasn't been updated since it was published in June 2009.
canvas-svg自 2009 年 6 月发布以来一直没有更新。
回答by Kamil
There is Save as: HTML5 canvascommand in Inkscape(free software for vector graphic)
Inkscape中有Save as: HTML5 canvas命令（矢量图形免费软件）
You can expect results like this:
你可以期待这样的结果：
<html>
<head>
<title>Inkscape Output</title>
</head>
<body>
<canvas id='canvas' width='640' height='400'></canvas>
<script>
var ctx = document.getElementById("canvas").getContext("2d");
// #layer1
ctx.save();
ctx.transform(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.665980);
// #path3342
ctx.beginPath();
ctx.lineJoin = 'round';
ctx.strokeStyle = 'rgb(194, 199, 202)';
ctx.lineWidth = 6.964493;
ctx.miterLimit = 10;
ctx.moveTo(177.895580, 392.397380);
ctx.bezierCurveTo(162.429960, 392.397380, 149.892650, 379.989530, 149.892650, 364.683620);
ctx.lineTo(149.892650, 187.607910);
ctx.lineTo(149.892650, 171.841360);
ctx.bezierCurveTo(149.892650, 164.491270, 152.842960, 157.442080, 158.094510, 152.244760);
ctx.lineTo(299.609330, 12.191281);
ctx.bezierCurveTo(304.860880, 6.993960, 311.983620, 4.074117, 319.410400, 4.074117);
ctx.bezierCurveTo(331.009610, 4.074117, 337.622310, 10.618525, 340.800640, 13.764037);
ctx.lineTo(480.726290, 152.244760);
ctx.bezierCurveTo(485.977840, 157.442080, 488.928150, 164.491270, 488.928150, 171.841360);
ctx.lineTo(488.928150, 364.683620);
ctx.bezierCurveTo(488.928150, 379.989530, 476.390840, 392.397380, 460.925220, 392.397380);
ctx.stroke();
ctx.restore();
// #layer2
ctx.save();
ctx.transform(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.665980);
// #path4326
ctx.save();
ctx.beginPath();
ctx.transform(1.000000, 0.000000, 0.000000, 1.000000, -0.297688, -300.245660);
ctx.lineJoin = 'round';
ctx.strokeStyle = 'rgb(68, 143, 228)';
ctx.lineCap = 'round';
ctx.miterLimit = 4;
ctx.lineWidth = 4.000000;
ctx.moveTo(304.365780, 475.555440);
ctx.lineTo(304.365780, 619.603740);
ctx.lineTo(278.258230, 619.603740);
ctx.stroke();
ctx.restore();
// #path4326-0
ctx.save();
ctx.beginPath();
ctx.transform(1.000000, 0.000000, 0.000000, 1.000000, -0.297688, -300.245660);
ctx.lineJoin = 'round';
ctx.strokeStyle = 'rgb(68, 143, 228)';
ctx.lineCap = 'round';
ctx.miterLimit = 4;
ctx.lineWidth = 4.000000;
ctx.moveTo(336.711080, 475.530360);
ctx.lineTo(336.711080, 619.594590);
ctx.lineTo(361.006650, 619.594590);
ctx.stroke();
ctx.restore();
// #path4343
ctx.beginPath();
ctx.lineJoin = 'round';
ctx.strokeStyle = 'rgb(68, 143, 228)';
ctx.lineCap = 'round';
ctx.miterLimit = 4;
ctx.lineWidth = 4.055327;
ctx.moveTo(112.056510, 175.334020);
ctx.lineTo(276.513300, 175.334020);
ctx.stroke();
// #path4345
ctx.save();
ctx.beginPath();
ctx.transform(1.000000, 0.000000, 0.000000, 1.000000, -0.297688, -300.245660);
ctx.lineJoin = 'round';
ctx.strokeStyle = 'rgb(68, 143, 228)';
ctx.lineCap = 'round';
ctx.miterLimit = 4;
ctx.lineWidth = 4.000000;
ctx.moveTo(528.297690, 475.579680);
ctx.lineTo(368.297690, 475.579680);
ctx.stroke();
ctx.restore();
ctx.restore();
// #Layer_1
ctx.save();
ctx.transform(1.000000, 0.000000, 0.000000, 1.000000, -0.297688, -299.579680);
ctx.restore();
// #Layer_2
ctx.save();
ctx.transform(1.000000, 0.000000, 0.000000, 1.000000, -0.297688, -299.579680);
// #line3344
ctx.beginPath();
ctx.strokeStyle = 'rgb(194, 199, 202)';
ctx.lineWidth = 7.000000;
ctx.miterLimit = 10;
ctx.lineCap = 'round';
ctx.moveTo(180.797680, 494.412660);
ctx.lineTo(464.797700, 494.412660);
ctx.stroke();
// #line3346
ctx.beginPath();
ctx.strokeStyle = 'rgb(194, 199, 202)';
ctx.lineWidth = 7.000000;
ctx.miterLimit = 10;
ctx.lineCap = 'round';
ctx.moveTo(322.797700, 494.412660);
ctx.lineTo(322.797700, 575.078670);
ctx.stroke();
// #g4291
ctx.save();
ctx.transform(1.000000, 0.000000, 0.000000, 1.000000, -12.000000, 0.000000);
// #path3350
ctx.beginPath();
ctx.fillStyle = 'rgb(144, 218, 108)';
ctx.moveTo(206.586690, 440.129660);
ctx.bezierCurveTo(206.586690, 439.949660, 206.688690, 439.783660, 206.853690, 439.693660);
ctx.bezierCurveTo(207.018690, 439.603660, 207.221690, 439.603660, 207.386690, 439.693660);
ctx.lineTo(217.377690, 445.142660);
ctx.bezierCurveTo(217.542690, 445.232660, 217.644690, 445.398660, 217.644690, 445.578660);
ctx.bezierCurveTo(217.644690, 445.758660, 217.542690, 445.924660, 217.377690, 446.014660);
ctx.lineTo(207.386690, 451.463660);
ctx.bezierCurveTo(207.221690, 451.553660, 207.018690, 451.553660, 206.853690, 451.463660);
ctx.bezierCurveTo(206.688690, 451.373660, 206.586690, 451.207660, 206.586690, 451.027660);
ctx.lineTo(206.586690, 440.129660);
ctx.fill();
// #path3352
ctx.beginPath();
ctx.fillStyle = 'rgb(144, 218, 108)';
ctx.moveTo(226.586690, 440.129660);
ctx.bezierCurveTo(226.586690, 439.949660, 226.688690, 439.783660, 226.853690, 439.693660);
ctx.bezierCurveTo(227.018690, 439.603660, 227.221690, 439.603660, 227.386690, 439.693660);
ctx.lineTo(237.377690, 445.142660);
ctx.bezierCurveTo(237.542690, 445.232660, 237.644690, 445.398660, 237.644690, 445.578660);
ctx.bezierCurveTo(237.644690, 445.758660, 237.542690, 445.924660, 237.377690, 446.014660);
ctx.lineTo(227.386690, 451.463660);
ctx.bezierCurveTo(227.221690, 451.553660, 227.018690, 451.553660, 226.853690, 451.463660);
ctx.bezierCurveTo(226.688690, 451.373660, 226.586690, 451.207660, 226.586690, 451.027660);
ctx.lineTo(226.586690, 440.129660);
ctx.fill();
// #path3354
ctx.beginPath();
ctx.fillStyle = 'rgb(144, 218, 108)';
ctx.moveTo(246.586690, 440.129660);
ctx.bezierCurveTo(246.586690, 439.949660, 246.688690, 439.783660, 246.853690, 439.693660);
ctx.bezierCurveTo(247.018690, 439.603660, 247.221690, 439.603660, 247.386690, 439.693660);
ctx.lineTo(257.377690, 445.142660);
ctx.bezierCurveTo(257.542690, 445.232660, 257.644690, 445.398660, 257.644690, 445.578660);
ctx.bezierCurveTo(257.644690, 445.758660, 257.542690, 445.924660, 257.377690, 446.014660);
ctx.lineTo(247.386690, 451.463660);
ctx.bezierCurveTo(247.221690, 451.553660, 247.018690, 451.553660, 246.853690, 451.463660);
ctx.bezierCurveTo(246.688690, 451.373660, 246.586690, 451.207660, 246.586690, 451.027660);
ctx.lineTo(246.586690, 440.129660);
ctx.fill();
ctx.restore();
// #g3356
ctx.save();
ctx.transform(1.000000, 0.000000, 0.000000, 1.000000, -261.202310, 183.745660);
// #path3358
ctx.beginPath();
ctx.fillStyle = 'rgb(68, 143, 228)';
ctx.moveTo(658.123000, 256.384000);
ctx.bezierCurveTo(658.123000, 256.204000, 658.225000, 256.038000, 658.389000, 255.948000);
ctx.bezierCurveTo(658.554000, 255.858000, 658.758000, 255.858000, 658.922000, 255.948000);
ctx.lineTo(668.913000, 261.397000);
ctx.bezierCurveTo(669.078000, 261.487000, 669.180000, 261.653000, 669.180000, 261.833000);
ctx.bezierCurveTo(669.180000, 262.013000, 669.078000, 262.179000, 668.913000, 262.269000);
ctx.lineTo(658.922000, 267.718000);
ctx.bezierCurveTo(658.758000, 267.808000, 658.554000, 267.808000, 658.389000, 267.718000);
ctx.bezierCurveTo(658.225000, 267.628000, 658.123000, 267.462000, 658.123000, 267.282000);
ctx.lineTo(658.123000, 256.384000);
ctx.fill();
// #path3360
ctx.beginPath();
ctx.fillStyle = 'rgb(68, 143, 228)';
ctx.moveTo(678.123000, 256.384000);
ctx.bezierCurveTo(678.123000, 256.204000, 678.225000, 256.038000, 678.389000, 255.948000);
ctx.bezierCurveTo(678.554000, 255.858000, 678.758000, 255.858000, 678.922000, 255.948000);
ctx.lineTo(688.913000, 261.397000);
ctx.bezierCurveTo(689.078000, 261.487000, 689.180000, 261.653000, 689.180000, 261.833000);
ctx.bezierCurveTo(689.180000, 262.013000, 689.078000, 262.179000, 688.913000, 262.269000);
ctx.lineTo(678.922000, 267.718000);
ctx.bezierCurveTo(678.758000, 267.808000, 678.554000, 267.808000, 678.389000, 267.718000);
ctx.bezierCurveTo(678.225000, 267.628000, 678.123000, 267.462000, 678.123000, 267.282000);
ctx.lineTo(678.123000, 256.384000);
ctx.fill();
// #path3362
ctx.beginPath();
ctx.fillStyle = 'rgb(68, 143, 228)';
ctx.moveTo(698.123000, 256.384000);
ctx.bezierCurveTo(698.123000, 256.204000, 698.225000, 256.038000, 698.389000, 255.948000);
ctx.bezierCurveTo(698.554000, 255.858000, 698.758000, 255.858000, 698.922000, 255.948000);
ctx.lineTo(708.913000, 261.397000);
ctx.bezierCurveTo(709.078000, 261.487000, 709.180000, 261.653000, 709.180000, 261.833000);
ctx.bezierCurveTo(709.180000, 262.013000, 709.078000, 262.179000, 708.913000, 262.269000);
ctx.lineTo(698.922000, 267.718000);
ctx.bezierCurveTo(698.758000, 267.808000, 698.554000, 267.808000, 698.389000, 267.718000);
ctx.bezierCurveTo(698.225000, 267.628000, 698.123000, 267.462000, 698.123000, 267.282000);
ctx.lineTo(698.123000, 256.384000);
ctx.fill();
ctx.restore();
// #g4296
ctx.save();
ctx.transform(1.000000, 0.000000, 0.000000, 1.000000, -8.000000, 0.000000);
// #path3366
ctx.beginPath();
ctx.fillStyle = 'rgb(144, 218, 108)';
ctx.moveTo(304.822690, 526.883660);
ctx.bezierCurveTo(305.002690, 526.883660, 305.168690, 526.985660, 305.258690, 527.149660);
ctx.bezierCurveTo(305.348690, 527.314660, 305.348690, 527.518660, 305.258690, 527.682660);
ctx.lineTo(299.810690, 537.673660);
ctx.bezierCurveTo(299.720690, 537.838660, 299.554690, 537.940660, 299.373690, 537.940660);
ctx.bezierCurveTo(299.193690, 537.940660, 299.027690, 537.838660, 298.937690, 537.673660);
ctx.lineTo(293.489690, 527.682660);
ctx.bezierCurveTo(293.398690, 527.518660, 293.398690, 527.314660, 293.489690, 527.149660);
ctx.bezierCurveTo(293.579690, 526.985660, 293.745690, 526.883660, 293.925690, 526.883660);
ctx.lineTo(304.822690, 526.883660);
ctx.fill();
// #path3368
ctx.beginPath();
ctx.fillStyle = 'rgb(144, 218, 108)';
ctx.moveTo(304.822690, 546.883660);
ctx.bezierCurveTo(305.002690, 546.883660, 305.168690, 546.985660, 305.258690, 547.149660);
ctx.bezierCurveTo(305.348690, 547.314660, 305.348690, 547.518660, 305.258690, 547.682660);
ctx.lineTo(299.810690, 557.673660);
ctx.bezierCurveTo(299.720690, 557.838660, 299.554690, 557.940660, 299.373690, 557.940660);
ctx.bezierCurveTo(299.193690, 557.940660, 299.027690, 557.838660, 298.937690, 557.673660);
ctx.lineTo(293.489690, 547.682660);
ctx.bezierCurveTo(293.398690, 547.518660, 293.398690, 547.314660, 293.489690, 547.149660);
ctx.bezierCurveTo(293.579690, 546.985660, 293.745690, 546.883660, 293.925690, 546.883660);
ctx.lineTo(304.822690, 546.883660);
ctx.fill();
// #path3370
ctx.beginPath();
ctx.fillStyle = 'rgb(144, 218, 108)';
ctx.moveTo(304.822690, 566.883660);
ctx.bezierCurveTo(305.002690, 566.883660, 305.168690, 566.985660, 305.258690, 567.149660);
ctx.bezierCurveTo(305.348690, 567.314660, 305.348690, 567.518660, 305.258690, 567.682660);
ctx.lineTo(299.810690, 577.673660);
ctx.bezierCurveTo(299.720690, 577.838660, 299.554690, 577.940660, 299.373690, 577.940660);
ctx.bezierCurveTo(299.193690, 577.940660, 299.027690, 577.838660, 298.937690, 577.673660);
ctx.lineTo(293.489690, 567.682660);
ctx.bezierCurveTo(293.398690, 567.518660, 293.398690, 567.314660, 293.489690, 567.149660);
ctx.bezierCurveTo(293.579690, 566.985660, 293.745690, 566.883660, 293.925690, 566.883660);
ctx.lineTo(304.822690, 566.883660);
ctx.fill();
ctx.restore();
// #g4301
ctx.save();
ctx.transform(1.000000, 0.000000, 0.000000, 1.000000, -8.000000, 0.000000);
// #path3374
ctx.beginPath();
ctx.fillStyle = 'rgb(68, 143, 228)';
ctx.moveTo(355.300690, 577.940660);
ctx.bezierCurveTo(355.120690, 577.940660, 354.954690, 577.838660, 354.864690, 577.674660);
ctx.bezierCurveTo(354.774690, 577.508660, 354.774690, 577.305660, 354.864690, 577.141660);
ctx.lineTo(360.312690, 567.149660);
ctx.bezierCurveTo(360.402690, 566.985660, 360.568690, 566.883660, 360.749690, 566.883660);
ctx.bezierCurveTo(360.929690, 566.883660, 361.095690, 566.985660, 361.185690, 567.149660);
ctx.lineTo(366.633690, 577.141660);
ctx.bezierCurveTo(366.724690, 577.305660, 366.724690, 577.508660, 366.633690, 577.674660);
ctx.bezierCurveTo(366.543690, 577.838660, 366.377690, 577.940660, 366.197690, 577.940660);
ctx.lineTo(355.300690, 577.940660);
ctx.fill();
// #path3376
ctx.beginPath();
ctx.fillStyle = 'rgb(68, 143, 228)';
ctx.moveTo(355.300690, 557.940660);
ctx.bezierCurveTo(355.120690, 557.940660, 354.954690, 557.838660, 354.864690, 557.674660);
ctx.bezierCurveTo(354.774690, 557.508660, 354.774690, 557.305660, 354.864690, 557.141660);
ctx.lineTo(360.312690, 547.149660);
ctx.bezierCurveTo(360.402690, 546.985660, 360.568690, 546.883660, 360.749690, 546.883660);
ctx.bezierCurveTo(360.929690, 546.883660, 361.095690, 546.985660, 361.185690, 547.149660);
ctx.lineTo(366.633690, 557.141660);
ctx.bezierCurveTo(366.724690, 557.305660, 366.724690, 557.508660, 366.633690, 557.674660);
ctx.bezierCurveTo(366.543690, 557.838660, 366.377690, 557.940660, 366.197690, 557.940660);
ctx.lineTo(355.300690, 557.940660);
ctx.fill();
// #path3378
ctx.beginPath();
ctx.fillStyle = 'rgb(68, 143, 228)';
ctx.moveTo(355.300690, 537.940660);
ctx.bezierCurveTo(355.120690, 537.940660, 354.954690, 537.838660, 354.864690, 537.674660);
ctx.bezierCurveTo(354.774690, 537.509660, 354.774690, 537.305660, 354.864690, 537.141660);
ctx.lineTo(360.312690, 527.150660);
ctx.bezierCurveTo(360.402690, 526.985660, 360.568690, 526.883660, 360.749690, 526.883660);
ctx.bezierCurveTo(360.929690, 526.883660, 361.095690, 526.985660, 361.185690, 527.150660);
ctx.lineTo(366.633690, 537.141660);
ctx.bezierCurveTo(366.724690, 537.305660, 366.724690, 537.509660, 366.633690, 537.674660);
ctx.bezierCurveTo(366.543690, 537.838660, 366.377690, 537.940660, 366.197690, 537.940660);
ctx.lineTo(355.300690, 537.940660);
ctx.fill();
ctx.restore();
// #path4239
ctx.beginPath();
ctx.globalAlpha = 0.0;
ctx.lineJoin = 'miter';
ctx.arc(55.916168, 462.781710, 54.000000, 0.000000, 6.28318531, 1);
// #path4241
ctx.beginPath();
ctx.globalAlpha = 1.0;
ctx.lineJoin = 'miter';
ctx.strokeStyle = 'rgb(68, 143, 228)';
ctx.miterLimit = 4;
ctx.lineWidth = 4.539356;
ctx.moveTo(55.965935, 421.849356);
ctx.bezierCurveTo(85.640371, 421.849356, 109.696255, 445.905241, 109.696255, 475.579680);
ctx.bezierCurveTo(109.696255, 505.254119, 85.640371, 529.310004, 55.965935, 529.310004);
ctx.bezierCurveTo(26.291499, 529.310004, 2.235615, 505.254119, 2.235615, 475.579680);
ctx.bezierCurveTo(2.235615, 445.905241, 26.291499, 421.849356, 55.965935, 421.849356);
ctx.stroke();
// #path4241-2
ctx.beginPath();
ctx.globalAlpha = 1.0;
ctx.lineJoin = 'miter';
ctx.strokeStyle = 'rgb(68, 143, 228)';
ctx.miterLimit = 4;
ctx.lineWidth = 4.539356;
ctx.moveTo(223.407520, 563.849326);
ctx.bezierCurveTo(253.081956, 563.849326, 277.137840, 587.905211, 277.137840, 617.579650);
ctx.bezierCurveTo(277.137840, 647.254089, 253.081956, 671.309974, 223.407520, 671.309974);
ctx.bezierCurveTo(193.733084, 671.309974, 169.677200, 647.254089, 169.677200, 617.579650);
ctx.bezierCurveTo(169.677200, 587.905211, 193.733084, 563.849326, 223.407520, 563.849326);
ctx.stroke();
// #path4241-6
ctx.beginPath();
ctx.globalAlpha = 1.0;
ctx.lineJoin = 'miter';
ctx.strokeStyle = 'rgb(68, 143, 228)';
ctx.miterLimit = 4;
ctx.lineWidth = 4.539356;
ctx.moveTo(584.297670, 421.849356);
ctx.bezierCurveTo(613.972106, 421.849356, 638.027990, 445.905241, 638.027990, 475.579680);
ctx.bezierCurveTo(638.027990, 505.254119, 613.972106, 529.310004, 584.297670, 529.310004);
ctx.bezierCurveTo(554.623234, 529.310004, 530.567350, 505.254119, 530.567350, 475.579680);
ctx.bezierCurveTo(530.567350, 445.905241, 554.623234, 421.849356, 584.297670, 421.849356);
ctx.stroke();
// #path4241-2-3
ctx.beginPath();
ctx.globalAlpha = 1.0;
ctx.lineJoin = 'miter';
ctx.strokeStyle = 'rgb(68, 143, 228)';
ctx.miterLimit = 4;
ctx.lineWidth = 4.539356;
ctx.moveTo(416.517330, 563.849326);
ctx.bezierCurveTo(446.191766, 563.849326, 470.247650, 587.905211, 470.247650, 617.579650);
ctx.bezierCurveTo(470.247650, 647.254089, 446.191766, 671.309974, 416.517330, 671.309974);
ctx.bezierCurveTo(386.842894, 671.309974, 362.787010, 647.254089, 362.787010, 617.579650);
ctx.bezierCurveTo(362.787010, 587.905211, 386.842894, 563.849326, 416.517330, 563.849326);
ctx.stroke();
ctx.restore();
// #layer3
// #g4306
ctx.save();
ctx.transform(1.000000, 0.000000, 0.000000, 1.000000, -11.362664, -296.837800);
// #path3396
ctx.beginPath();
ctx.fillStyle = 'rgb(144, 218, 108)';
ctx.moveTo(390.705690, 453.977660);
ctx.bezierCurveTo(390.705690, 468.435660, 378.982690, 480.153660, 364.529690, 480.153660);
ctx.lineTo(298.882690, 480.153660);
ctx.bezierCurveTo(284.424690, 480.153660, 272.705690, 468.435660, 272.705690, 453.977660);
ctx.lineTo(272.705690, 388.331660);
ctx.bezierCurveTo(272.705690, 373.873660, 284.424690, 362.155660, 298.882690, 362.155660);
ctx.lineTo(364.529690, 362.155660);
ctx.bezierCurveTo(378.982690, 362.155660, 390.705690, 373.873660, 390.705690, 388.331660);
ctx.lineTo(390.705690, 453.977660);
ctx.fill();
// #circle3398
ctx.beginPath();
ctx.strokeStyle = 'rgb(242, 242, 242)';
ctx.lineWidth = 4.000000;
ctx.miterLimit = 10;
ctx.arc(330.797700, 404.458650, 27.000000, 0.000000, 6.28318531, 1);
ctx.stroke();
ctx.restore();
// #line3400
ctx.beginPath();
ctx.strokeStyle = 'rgb(242, 242, 242)';
ctx.lineCap = 'round';
ctx.miterLimit = 10;
ctx.lineWidth = 4.000000;
ctx.moveTo(319.435030, 94.120850);
ctx.lineTo(319.435030, 121.120850);
ctx.stroke();
</script>
</body>
</html>Source SVG file was like this:
源 SVG 文件是这样的：
It is not perfect, one line is missing at the bottom, you may have to fix that in code or draw SVG better (maybe my house shape path is not closed properly).
它并不完美，底部缺少一行，您可能需要在代码中修复它或更好地绘制 SVG（可能我的房子形状路径没有正确关闭）。
回答by emerix
I recommend the Java project SVGToCanvasif you just want to statically generate some Canvas javascript from a SVG file.
如果您只想从 SVG 文件静态生成一些 Canvas javascript，我推荐 Java 项目SVGToCanvas。
回答by Professor Cloud
回答by Pawel Dubiel
If you want manipulate objects after conversion I recommend http://www.kineticjs.com/it supports also SVG path data format. For instance: http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-path-tutorial/.
如果您想在转换后操作对象，我推荐http://www.kineticjs.com/它也支持 SVG 路径数据格式。例如：http: //www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-path-tutorial/。
It's pretty easy to loop through svg and change rectangles, paths, lines etc.. to coresponding kineticJS (canvas) objects.
循环遍历 svg 并将矩形、路径、线条等更改为相应的 kineticJS（画布）对象非常容易。
回答by Adam
回答by George Aslanis
Had same requirement for a couple internal projects. Thought it might help others, so it's available as an SVG2Canvasexperiment.
对几个内部项目有相同的要求。认为它可能对其他人有帮助，因此它可用作SVG2Canvas实验。
回答by Ms2ger
No. SVG is a (mostly) static vector format and canvas is an API to a dynamic bitmap. Turning SVG into canvas makes as much sense as turning SVG into MathML: none.
不。SVG 是（主要是）静态矢量格式，canvas 是动态位图的 API。将 SVG 转换为画布与将 SVG 转换为 MathML 一样有意义：无。
