有没有一种方法可以将SVG文件转换为HTML5的画布兼容命令？
9个回答
23
canvg 似乎是更好的解决方案。截至2012年1月，它是一个活跃的项目。
canvas-svg 自2009年6月发布以来就没有更新过。
- schellmax
1
无法下载canvas-svg。 - Chris P
21
Inkscape（一款免费的矢量图形软件）中有“另存为：HTML5画布”命令。
它也是非常有用/强大的矢量绘图应用程序。
如果您创建了这样的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（也许我的房屋形状路径没有正确关闭）。
- Kamil
3
你知道为什么图层变换会有奇怪的平移吗？例如，在你的例子中，Layer 1 的变换是：ctx.transform(1.000000, 0.000000, 0.000000, 1.000000, -0.297688, -299.579680)；-.29 和 -299 是从哪里来的呢？谢谢。 - DoomGoober
1抱歉，@DoomGoober，我目前还不清楚。在发布这个答案前几年，我创建了这张图片。也许是因为对象组已经一起移动，而该组中的某些对象属性没有“组内”改变。 - Kamil
1谢谢，我终于弄明白了。转换是指整个Inkscape图层上的形状被平移。如果我将图层变换设置为identity，则.transform()完全消失。 - DoomGoober
9
虽然没有100%的解决方案，但是有一些脚本库可以将SVG的子集转换为Canvas，例如http://code.google.com/p/canvas-svg/。还有实验性的Path2D API，可以将SVG路径数据字符串绘制到画布上，不确定在各个浏览器中的支持程度如何。
- Erik Dahlström
1
文档缺失，答案未经解释。-1 - Pedro Sequeira
6
如果您只想从SVG文件静态生成一些Canvas JavaScript，我建议使用Java项目SVGToCanvas。
- emerix
1
1太好了，正是我想要的。我知道它一定存在，因为“路径”数据中的字母代表画布中可用的相同命令。 - Joseph Lust
4
试试这个：
（注：此网站可将SVG图像转换为Canvas格式，方便在IT技术中使用）- Professor Cloud
0
如果您想在转换后操作对象，我建议使用http://www.kineticjs.com/，它还支持SVG路径数据格式。例如：http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-path-tutorial/。
循环遍历SVG并将矩形、路径、线等更改为相应的KineticJS（画布）对象非常容易。
循环遍历SVG并将矩形、路径、线等更改为相应的KineticJS（画布）对象非常容易。
- Pawel Dubiel
-18
不。SVG是一种（大部分）静态矢量格式，而canvas是一个动态位图的API。将SVG转换为canvas就像将SVG转换为MathML一样没有意义。
- Ms2ger
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接