如何将 SVG 文件转换为 HTML5 的画布？
Posted
技术标签:
【中文标题】如何将 SVG 文件转换为 HTML5 的画布？【英文标题】：How to convert SVG files to HTML5's canvas? 【发布时间】：2011-02-23 20:27:27 【问题描述】：有没有办法将 SVG 文件转换为 html5 的画布兼容命令？
【问题讨论】：
【参考方案1】：Inkscape（矢量图形免费软件）中有Save as: HTML5 canvas 命令。
https://inkscape.org/en/
它也是一个非常有用/强大的矢量绘图应用程序。
如果你像这样创建 SVG 图像：
您可以期待这样的导出结果：
<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>它并不完美，底部缺少一行，您可能需要在代码中修复它或更好地绘制 SVG（可能我的房子形状路径没有正确关闭）。
【讨论】：
你知道为什么层变换有奇怪的翻译吗？例如，在您的示例中，第 1 层具有以下变换： ctx.transform(1.000000, 0.000000, 0.000000, 1.000000, -0.297688, -299.579680); -.29 和 -299 来自哪里？谢谢。 @DoomGoober 抱歉，我现在不知道。在发布此答案之前几年，我已经创建了此图像。这可能是因为一组对象已一起移动，并且该组中对象的某些属性没有更改“组内”。 谢谢，我终于想通了。转换是形状正在被转换的整个 Inkscape 层。如果我将图层转换设置为标识，则 .transform() 将完全消失。【参考方案2】：没有 100% 的解决方案，但有一些脚本库可以将 svg 的子集转换为画布，例如 http://code.google.com/p/canvas-svg/。还有实验性的Path2D API，可以在画布上绘制一个 svg 路径数据字符串，但不确定它在浏览器中的支持程度。
【讨论】：
文档湖，没有解释答案.. -1【参考方案3】：对几个内部项目有相同的要求。认为它可能对其他人有所帮助，因此可以将其作为 SVG2Canvas 实验使用。
【讨论】：
很遗憾，该链接已损坏【参考方案4】：如果您想在转换后操作对象，我推荐http://www.kineticjs.com/ 它还支持 SVG 路径数据格式。 例如：http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-path-tutorial/。
循环遍历 svg 并将矩形、路径、线条等更改为对应的 kineticJS（画布）对象非常容易。
【讨论】：
【参考方案5】：canvg 似乎是一个更好的解决方案。截至 2012 年 1 月，这是一个活跃的项目。
canvas-svg 自 2009 年 6 月发布以来一直没有更新。
【讨论】：
无法下载canvas-svg。【参考方案6】：如果您只想从 SVG 文件静态生成一些 Canvas javascript，我推荐 Java 项目 SVGToCanvas。
【讨论】：
完美。正是我想要的。我知道它一定存在，因为“路径”数据中的字母代表画布中可用的相同命令。【参考方案7】：试试这个：
http://www.professorcloud.com/svg-to-canvas/
【讨论】：
【参考方案8】：这是我的尝试！
http://appsynergy.net/projects/converting-svg-path-to-html5-canvas/
【讨论】：
【参考方案9】：没有。 SVG 是（大部分）静态矢量格式，canvas 是动态位图的 API。将 SVG 转换为画布与将 SVG 转换为 MathML 一样有意义：无。
【讨论】：
以上是关于如何将 SVG 文件转换为 HTML5 的画布？的主要内容，如果未能解决你的问题，请参考以下文章