从inkscape设计到带有动画的html5有什么途径吗？_Html_Canvas_Svg_Jquery Animate_Inkscape

从inkscape设计到带有动画的html5有什么途径吗？

html canvas svg

从inkscape设计到带有动画的html5有什么途径吗？,html,canvas,svg,jquery-animate,inkscape,Html,Canvas,Svg,Jquery Animate,Inkscape,我已经在inkscape中创建了几个设计，我认为我可以将它们导出到svg，并为一些简单的动画制作动画，我想伴随我正在创建的基于文本的游戏。在我看来，似乎没有任何好的方法来制作.svg文件的动画？我看了RaphalJS，但是如果没有只加载黑色形状的劣质插件，它似乎无法处理svg文件我发现这是一个插件，可以让html5画布上的所有对象都画出来。输出如下所示 <!DOCTYPE html> <html> <head> <meta http-equiv

我已经在inkscape中创建了几个设计，我认为我可以将它们导出到svg，并为一些简单的动画制作动画，我想伴随我正在创建的基于文本的游戏。在我看来，似乎没有任何好的方法来制作.svg文件的动画？我看了RaphalJS，但是如果没有只加载黑色形状的劣质插件，它似乎无法处理svg文件

我发现这是一个插件，可以让html5画布上的所有对象都画出来。输出如下所示

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Inkscape Output</title>
</head>
<body>
    <canvas id='canvas' width='744' height='1052'></canvas>
    <script>
    var ctx = document.getElementById("canvas").getContext("2d");

// #layer6

// #left_arm
    ctx.lineJoin = 'miter';
    ctx.strokeStyle = 'rgb(0, 0, 0)';
    ctx.lineCap = 'butt';
    ctx.miterLimit = 4;
    ctx.lineWidth = 12.051516;
    ctx.fillStyle = 'rgb(226, 205, 178)';
    ctx.beginPath();
    ctx.moveTo(169.049330, 474.312810);
    ctx.bezierCurveTo(169.049330, 474.312810, 123.876460, 497.974790, 72.250311, 549.600940);
    ctx.bezierCurveTo(20.624171, 601.227070, 50.739424, 622.737970, 50.739424, 622.737970);
    ctx.bezierCurveTo(50.739424, 622.737970, 74.401403, 637.795590, 100.214470, 622.737970);
    ctx.bezierCurveTo(126.027540, 607.680340, 117.423180, 584.018370, 117.423180, 584.018370);
    ctx.bezierCurveTo(117.423180, 584.018370, 115.272090, 573.262920, 123.876460, 566.809650);
    ctx.bezierCurveTo(132.480810, 560.356380, 160.444970, 543.147670, 160.444970, 543.147670);
    ctx.bezierCurveTo(160.444970, 543.147670, 209.920030, 523.787870, 201.315670, 500.125880);
    ctx.bezierCurveTo(192.711310, 476.463900, 169.049330, 474.312810, 169.049330, 474.312810);
    ctx.closePath();
    ctx.fill();
    ctx.stroke();

// #layer10

// #sword

// #sword_handle
    ctx.lineJoin = 'miter';
    ctx.strokeStyle = 'rgb(0, 0, 0)';
    ctx.lineCap = 'butt';
    ctx.miterLimit = 4;
    ctx.lineWidth = 8.034344;
    ctx.fillStyle = 'rgb(189, 197, 198)';
    ctx.beginPath();
    ctx.moveTo(460.209840, 512.697960);
    ctx.lineTo(546.445130, 596.255150);
    ctx.lineTo(561.978190, 598.933250);
    ctx.lineTo(559.835700, 625.714410);
    ctx.lineTo(534.125800, 626.785660);
    ctx.lineTo(532.518930, 606.431980);
    ctx.lineTo(499.310320, 574.294610);
    ctx.lineTo(437.713670, 622.500670);
    ctx.lineTo(431.286200, 641.783090);
    ctx.lineTo(405.576300, 641.783090);
    ctx.lineTo(405.576300, 619.286940);
    ctx.lineTo(424.858720, 609.645720);
    ctx.lineTo(485.919740, 559.832780);
    ctx.lineTo(448.426130, 523.410430);
    ctx.lineTo(431.821820, 520.196690);
    ctx.lineTo(433.964310, 498.771770);
    ctx.lineTo(457.531730, 496.093660);
    ctx.closePath();
    ctx.fill();
    ctx.stroke();

// #sword_blade
    ctx.lineJoin = 'miter';
    ctx.strokeStyle = 'rgb(0, 0, 0)';
    ctx.lineCap = 'butt';
    ctx.miterLimit = 4;
    ctx.lineWidth = 12.051516;
    ctx.fillStyle = 'rgb(221, 221, 221)';
    ctx.beginPath();
    ctx.moveTo(491.275970, 542.157230);
    ctx.lineTo(633.751670, 379.327860);
    ctx.lineTo(724.807540, 338.620520);
    ctx.lineTo(691.063300, 431.818900);
    ctx.lineTo(521.806470, 570.009620);
    ctx.closePath();
    ctx.fill();
    ctx.stroke();

// #sword_detail
    ctx.lineJoin = 'miter';
    ctx.strokeStyle = 'rgb(0, 0, 0)';
    ctx.lineCap = 'butt';
    ctx.miterLimit = 4;
    ctx.lineWidth = 4.017172;
    ctx.beginPath();
    ctx.moveTo(631.609170, 431.818900);
    ctx.lineTo(520.199610, 541.085990);
    ctx.closePath();
    ctx.stroke();

// #g5700

// #right_arm
    ctx.lineJoin = 'miter';
    ctx.strokeStyle = 'rgb(0, 0, 0)';
    ctx.lineCap = 'butt';
    ctx.miterLimit = 4;
    ctx.lineWidth = 12.051516;
    ctx.fillStyle = 'rgb(226, 205, 178)';
    ctx.beginPath();
    ctx.moveTo(367.878830, 471.124850);
    ctx.bezierCurveTo(367.878830, 471.124850, 413.051700, 494.786840, 464.677840, 546.412980);
    ctx.bezierCurveTo(516.303990, 598.039120, 486.188740, 619.550010, 486.188740, 619.550010);
    ctx.bezierCurveTo(486.188740, 619.550010, 462.526760, 634.607640, 436.713690, 619.550010);
    ctx.bezierCurveTo(410.900620, 604.492390, 419.504970, 580.830410, 419.504970, 580.830410);
    ctx.bezierCurveTo(419.504970, 580.830410, 421.656070, 570.074960, 413.051700, 563.621700);
    ctx.bezierCurveTo(404.447340, 557.168420, 376.483190, 539.959710, 376.483190, 539.959710);
    ctx.bezierCurveTo(376.483190, 539.959710, 327.008130, 520.599910, 335.612490, 496.937920);
    ctx.bezierCurveTo(344.216840, 473.275950, 367.878830, 471.124850, 367.878830, 471.124850);
    ctx.closePath();
    ctx.fill();
    ctx.stroke();

// #layer4

// #body
    ctx.lineJoin = 'miter';
    ctx.strokeStyle = 'rgb(0, 0, 0)';
    ctx.lineCap = 'butt';
    ctx.miterLimit = 4;
    ctx.lineWidth = 14.461820;
    ctx.fillStyle = 'rgb(136, 8, 6)';
    ctx.beginPath();
    ctx.moveTo(214.358910, 461.584230);
    ctx.lineTo(140.227660, 476.352560);
    ctx.lineTo(174.646290, 679.888840);
    ctx.bezierCurveTo(174.646290, 679.888840, 319.264480, 686.775420, 351.401860, 679.888840);
    ctx.bezierCurveTo(383.539240, 673.002260, 381.243720, 668.411210, 381.243720, 668.411210);
    ctx.lineTo(346.810810, 475.586950);
    ctx.closePath();
    ctx.fill();
    ctx.stroke();

// #layer7

// #path5705
    ctx.lineJoin = 'miter';
    ctx.strokeStyle = 'rgb(0, 0, 0)';
    ctx.lineCap = 'butt';
    ctx.miterLimit = 4;
    ctx.lineWidth = 14.461820;
    ctx.fillStyle = 'rgb(0, 47, 102)';
    ctx.beginPath();
    ctx.moveTo(179.804770, 682.968460);
    ctx.bezierCurveTo(145.387350, 846.451280, 129.267080, 840.230130, 129.267080, 840.230130);
    ctx.lineTo(245.425900, 861.741040);
    ctx.lineTo(270.150520, 741.228420);
    ctx.lineTo(344.376000, 861.741040);
    ctx.lineTo(415.465120, 848.860290);
    ctx.lineTo(377.730780, 671.150370);
    ctx.closePath();
    ctx.fill();
    ctx.stroke();

// #layer8

// #left_boot

// #path5708
    ctx.lineJoin = 'miter';
    ctx.strokeStyle = 'rgb(0, 0, 0)';
    ctx.lineCap = 'butt';
    ctx.miterLimit = 4;
    ctx.lineWidth = 9.641212;
    ctx.fillStyle = 'rgb(63, 27, 15)';
    ctx.beginPath();
    ctx.moveTo(115.907270, 790.712140);
    ctx.lineTo(189.044310, 827.280700);
    ctx.lineTo(287.994420, 816.525200);
    ctx.lineTo(249.274800, 857.395910);
    ctx.lineTo(236.368270, 921.928520);
    ctx.bezierCurveTo(236.368270, 921.928520, 208.404110, 932.684050, 178.288860, 919.777490);
    ctx.bezierCurveTo(148.173610, 906.871020, 115.907270, 913.324300, 115.907270, 913.324300);
    ctx.lineTo(130.964900, 835.884990);
    ctx.closePath();
    ctx.fill();
    ctx.stroke();

// #path5710
    ctx.lineJoin = 'miter';
    ctx.strokeStyle = 'rgb(0, 0, 0)';
    ctx.lineCap = 'butt';
    ctx.miterLimit = 4;
    ctx.lineWidth = 8.034344;
    ctx.fillStyle = 'rgb(47, 17, 7)';
    ctx.beginPath();
    ctx.moveTo(234.217180, 917.626460);
    ctx.bezierCurveTo(234.217180, 917.626460, 242.821540, 891.813350, 191.195400, 874.604670);
    ctx.bezierCurveTo(139.569250, 857.395910, 113.756180, 915.475330, 113.756180, 915.475330);
    ctx.bezierCurveTo(113.756180, 915.475330, 126.662730, 936.986210, 173.986680, 936.986210);
    ctx.bezierCurveTo(221.310650, 936.986210, 223.461740, 926.230770, 234.217180, 917.626460);
    ctx.closePath();
    ctx.fill();
    ctx.stroke();

// #right_group

// #path5708-5
    ctx.lineJoin = 'miter';
    ctx.strokeStyle = 'rgb(0, 0, 0)';
    ctx.lineCap = 'butt';
    ctx.miterLimit = 4;
    ctx.lineWidth = 8.828593;
    ctx.fillStyle = 'rgb(63, 27, 15)';
    ctx.beginPath();
    ctx.moveTo(297.898670, 803.891100);
    ctx.lineTo(366.129690, 811.970370);
    ctx.lineTo(440.429470, 766.631520);
    ctx.lineTo(422.319920, 818.623840);
    ctx.lineTo(431.508460, 883.515780);
    ctx.bezierCurveTo(431.508460, 883.515780, 412.818260, 903.537450, 385.366440, 902.220320);
    ctx.bezierCurveTo(357.914630, 900.903280, 334.567490, 918.439940, 334.567490, 918.439940);
    ctx.lineTo(323.204190, 840.722950);
    ctx.closePath();
    ctx.fill();
    ctx.stroke();

// #path5710-7
    ctx.lineJoin = 'miter';
    ctx.strokeStyle = 'rgb(0, 0, 0)';
    ctx.lineCap = 'butt';
    ctx.miterLimit = 4;
    ctx.lineWidth = 11.703228;
    ctx.fillStyle = 'rgb(47, 17, 7)';
    ctx.beginPath();
    ctx.moveTo(515.092570, 881.035350);
    ctx.bezierCurveTo(515.092570, 881.035350, 468.008310, 856.551410, 424.189650, 846.672550);
    ctx.bezierCurveTo(337.326750, 827.089400, 333.932730, 919.065630, 333.932730, 919.065630);
    ctx.bezierCurveTo(333.932730, 919.065630, 373.749010, 924.295430, 425.686820, 923.723430);
    ctx.bezierCurveTo(474.390020, 923.187180, 520.877320, 922.241510, 515.092570, 881.035350);
    ctx.closePath();
    ctx.fill();
    ctx.stroke();

// #layer3

// #head
    ctx.lineJoin = 'miter';
    ctx.strokeStyle = 'rgb(0, 0, 0)';
    ctx.lineCap = 'butt';
    ctx.miterLimit = 4;
    ctx.lineWidth = 16.068687;
    ctx.fillStyle = 'rgb(226, 205, 178)';
    ctx.beginPath();
    ctx.moveTo(122.996940, 449.647500);
    ctx.bezierCurveTo(288.274870, 550.650680, 322.707770, 527.236300, 322.707770, 527.236300);
    ctx.lineTo(384.687000, 465.716190);
    ctx.lineTo(393.869110, 362.417480);
    ctx.bezierCurveTo(393.869110, 362.417480, 345.663040, 259.118770, 242.364330, 277.482980);
    ctx.bezierCurveTo(139.065620, 295.847190, 122.996930, 350.939840, 120.701410, 380.781690);
    ctx.bezierCurveTo(118.405880, 410.623550, 122.996930, 449.647500, 122.996930, 449.647500);
    ctx.closePath();
    ctx.fill();
    ctx.stroke();

// #layer9

// #path5738
    ctx.save();
    ctx.lineJoin = 'miter';
    ctx.strokeStyle = 'rgb(0, 0, 0)';
    ctx.miterLimit = 4;
    ctx.lineWidth = 0.000000;
    ctx.fillStyle = 'rgb(0, 0, 0)';
    ctx.beginPath();
    ctx.transform(0.803434, 0.000000, 0.000000, 1.321761, -190.572030, -237.911570);
    ctx.moveTo(605.439820, 491.453670);
    ctx.translate(593.036930, 491.453670);
    ctx.rotate(0.000000);
    ctx.scale(0.842272, 1.000000);
    ctx.arc(0.000000, 0.000000, 14.725523, 0.000000, 3.14159265, 0);
    ctx.scale(1.187265, 1.000000);
    ctx.rotate(-0.000000);
    ctx.translate(-593.036930, -491.453670);
    ctx.translate(593.036930, 491.453670);
    ctx.rotate(0.000000);
    ctx.scale(0.842272, 1.000000);
    ctx.arc(0.000000, 0.000000, 14.725523, 3.141593, 6.28318531, 0);
    ctx.scale(1.187265, 1.000000);
    ctx.rotate(-0.000000);
    ctx.translate(-593.036930, -491.453670);
    ctx.closePath();
    ctx.fill();
    ctx.stroke();
    ctx.restore();

// #path5738-6
    ctx.save();
    ctx.lineJoin = 'miter';
    ctx.strokeStyle = 'rgb(0, 0, 0)';
    ctx.miterLimit = 4;
    ctx.lineWidth = 0.000000;
    ctx.fillStyle = 'rgb(0, 0, 0)';
    ctx.beginPath();
    ctx.transform(0.803434, 0.000000, 0.000000, 1.321761, -129.540700, -235.976480);
    ctx.moveTo(605.439820, 491.453670);
    ctx.translate(593.036930, 491.453670);
    ctx.rotate(0.000000);
    ctx.scale(0.842272, 1.000000);
    ctx.arc(0.000000, 0.000000, 14.725523, 0.000000, 3.14159265, 0);
    ctx.scale(1.187265, 1.000000);
    ctx.rotate(-0.000000);
    ctx.translate(-593.036930, -491.453670);
    ctx.translate(593.036930, 491.453670);
    ctx.rotate(0.000000);
    ctx.scale(0.842272, 1.000000);
    ctx.arc(0.000000, 0.000000, 14.725523, 3.141593, 6.28318531, 0);
    ctx.scale(1.187265, 1.000000);
    ctx.rotate(-0.000000);
    ctx.translate(-593.036930, -491.453670);
    ctx.closePath();
    ctx.fill();
    ctx.stroke();
    ctx.restore();

// #path5796
    ctx.lineJoin = 'miter';
    ctx.strokeStyle = 'rgb(0, 0, 0)';
    ctx.miterLimit = 4;
    ctx.lineWidth = 0.000000;
    ctx.fillStyle = 'rgb(0, 0, 0)';
    ctx.beginPath();
    ctx.moveTo(324.482710, 489.017810);
    ctx.bezierCurveTo(316.343430, 488.389010, 307.975650, 488.551210, 300.034780, 486.372620);
    ctx.bezierCurveTo(297.411000, 485.652790, 294.897450, 484.578900, 292.328780, 483.682040);
    ctx.bezierCurveTo(285.908390, 481.389630, 289.150330, 472.309830, 295.570720, 474.602230);
    ctx.lineTo(295.570720, 474.602230);
    ctx.bezierCurveTo(297.661320, 475.368950, 299.699560, 476.297230, 301.842520, 476.902410);
    ctx.bezierCurveTo(309.441050, 479.048230, 317.489800, 478.760700, 325.283370, 479.409900);
    ctx.bezierCurveTo(332.077190, 479.976050, 331.276520, 489.583950, 324.482710, 489.017810);
    ctx.closePath();
    ctx.fill();
    ctx.stroke();

// #layer2

// #hair
    ctx.lineJoin = 'miter';
    ctx.strokeStyle = 'rgb(0, 0, 0)';
    ctx.lineCap = 'butt';
    ctx.miterLimit = 4;
    ctx.lineWidth = 12.372890;
    ctx.fillStyle = 'rgb(240, 255, 95)';
    ctx.beginPath();
    ctx.moveTo(74.790868, 442.760910);
    ctx.lineTo(83.972981, 291.256140);
    ctx.lineTo(233.182230, 167.297690);
    ctx.lineTo(308.934620, 132.864790);
    ctx.lineTo(260.728550, 199.435070);
    ctx.lineTo(400.755690, 165.002160);
    ctx.lineTo(315.821190, 249.936660);
    ctx.lineTo(391.573580, 217.799290);
    ctx.lineTo(469.621500, 247.641120);
    ctx.lineTo(494.872300, 256.823240);
    ctx.lineTo(384.687000, 291.256140);
    ctx.lineTo(474.212550, 337.166680);
    ctx.lineTo(487.985710, 364.713000);
    ctx.lineTo(416.824370, 341.757730);
    ctx.lineTo(389.278060, 357.826420);
    ctx.lineTo(246.266730, 350.021640);
    ctx.lineTo(194.617380, 395.702610);
    ctx.lineTo(188.878560, 436.792550);
    ctx.lineTo(149.395500, 466.634390);
    ctx.closePath();
    ctx.fill();
    ctx.stroke();

    </script>
</body>
</html>


Inkscape输出
var ctx=document.getElementById（“画布”）.getContext（“2d”）；
//#第6层
//#左臂
ctx.lineJoin='miter'；
ctx.strokeStyle='rgb（0,0,0）'；
ctx.lineCap=‘对接’；
ctx.miterLimit=4；
ctx.lineWidth=12.051516；
ctx.fillStyle='rgb（226205178）'；
ctx.beginPath（）；
ctx.moveTo（169.049330474.312810）；
ctx.bezierCurveTo（169.049330474.312810123.876460497.97479072.250311549.600940）；
ctx.bezierCurveTo（20.624171601.227070、50.739424622.737970、50.739424622.737970）；
ctx.bezierCurveTo（50.739424622.737970、74.401403637.795590100.214470622.737970）；
ctx.bezierCurveTo（126.027540607.680340117.423180584.018370117.423180584.018370）；
比塞尔曲线图（117.423180584.018370115.272090573.262920123.876460566.809650）；
ctx.bezierCurveTo（132.480810、560.356380、160.444970、543.147670、160.444970、543.147670）；
ctx.bezierCurveTo（160.444970543.1476700209.92030523.787870201.315670500.125880）；
ctx.bezierCurveTo（192.711310、476.463900、169.049330、474.312810、169.049330、474.312810）；
ctx.closePath（）；
ctx.fill（）；
ctx.stroke（）；
//#第10层
//#剑
//#剑柄#
ctx.lineJoin='miter'；
ctx.strokeStyle='rgb（0,0,0）'；
ctx.lineCap=‘对接’；
ctx.miterLimit=4；
ctx.lineWidth=8.034344；
ctx.fillStyle='rgb（189197198）'；
ctx.beginPath（）；
ctx.moveTo（460.209840、512.697960）；
ctx.lineTo（546.445130596.255150）；
ctx.lineTo（561.978190598.933250）；
ctx.lineTo（559.835700、625.714410）；
ctx.lineTo（534.125800626.785660）；
ctx.lineTo（532.518930606.431980）；
ctx.lineTo（499.310320574.294610）；
ctx.lineTo（437.713670622.500670）；
ctx.lineTo（431.286200641.783090）；
ctx.lineTo（405.576300641.783090）；
ctx.lineTo（405.576300619.286940）；
ctx.lineTo（424.858720609.645720）；
ctx.lineTo（485.919740559.832780）；
ctx.lineTo（448.426130、523.410430）；
ctx.lineTo（431.821820、520.196690）；
ctx.lineTo（433.964310498.771770）；
ctx.lineTo（457.531730496.093660）；
ctx.closePath（）；
ctx.fill（）；
ctx.stroke（）；
//#剑#刃
ctx.lineJoin='miter'；
ctx.strokeStyle='rgb（0,0,0）'；
ctx.lineCap=‘对接’；
ctx.miterLimit=4；
ctx.lineWidth=12.051516；
ctx.fillStyle='rgb（221221221）'；
ctx.beginPath（）；
ctx.moveTo（491.275970542.157230）；
ctx.lineTo（633.751670、379.327860）；
ctx.lineTo（724.807540、338.620520）；
ctx.lineTo（691.063300431.818900）；
ctx.lineTo（521.806470570.009620）；
ctx.closePath（）；
ctx.fill（）；
ctx.stroke（）；
//#剑#细节
ctx.lineJoin='miter'；
ctx.strokeStyle='rgb（0,0,0）'；
ctx.lineCap=‘对接’；
ctx.miterLimit=4；
ctx.lineWidth=4.017172；
ctx.beginPath（）；
ctx.moveTo（631.609170431.818900）；
ctx.lineTo（520.199610541.085990）；
ctx.closePath（）；
ctx.stroke（）；
//#g5700
//#右臂
ctx.lineJoin='miter'；
ctx.strokeStyle='rgb（0,0,0）'；
ctx.lineCap=‘对接’；
ctx.miterLimit=4；
ctx.lineWidth=12.051516；
ctx.fillStyle='rgb（226205178）'；
ctx.beginPath（）；
ctx.moveTo（367.878830471.124850）；
ctx.bezierCurveTo（367.878830471.124850413.051700494.786840464.677840546.412980）；
ctx.bezierCurveTo（516.303990、598.039120、486.188740、619.550010、486.188740、619.550010）；
ctx.bezierCurveTo（486.188740619.550010、462.526760634.607640436.713690619.550010）；
ctx.bezierCurveTo（410.900620604.492390419.504970580.830410419.504970580.830410）；
ctx.bezierCurveTo（419.504970580.830410421.656070570.074960413.051700563.621700）；
ctx.bezierCurveTo（404.447340557.168420376.483190539.959710、376.483190539.959710）；
ctx.bezierCurveTo（376.483190539.959710327.008130520.5999101335.612490496.937920）；
ctx.bezierCurveTo（344.216840、473.275950、367.878830、471.124850、367.878830、471.124850）；
ctx.closePath（）；
ctx.fill（）；
ctx.stroke（）；
//#第4层
//#身体
ctx.lineJoin='miter'；
ctx.strokeStyle='rgb（0,0,0）'；
ctx.lineCap=‘对接’；
ctx.miterLimit=4；
ctx.lineWidth=14.461820；
ctx.fillStyle='rgb（136,8,6）'；
ctx.beginPath（）；
ctx.moveTo（214.358910461.584230）；
ctx.lineTo（140.227660476.352560）；
ctx.lineTo（174.646290679.888840）；
ctx.bezierCurveTo（174.646290679.888840319.264480686.775420351.401860679.888840）；
ctx.bezierCurveTo（383.539240673.002260、381.243720、668.411210、381.243720、668.411210）；
ctx.lineTo（346.810810475.586950）；
ctx.closePath（）；
ctx.fill（）；
ctx.stroke（）；
//#第7层
//#路径5705
ctx.lineJoin='miter'；
ctx.strokeStyle='rgb（0,0,0）'；
ctx.lineCap=‘对接’；
ctx.miterLimit=4；
ctx.lineWidth=14.461820；
ctx.fillStyle='rgb（0,47,102）'；
ctx.beginPath（）；
ctx.moveTo（179.804770682.968460）；
ctx.bezierCurveTo（145.387350846.451280129.267080840.230130129.267080840.230130）；
ctx.lineTo（245.425900861.741040）；
ctx.lineTo（270.150520741.228420）；
ctx.lineTo（344.376000、861.741040）；
ctx.lineTo（415.465120848.860290）；
ctx.lineTo（377.730780、671.150370）；
ctx.closePath（）；
ctx.fill（）；
ctx.stroke（）；
//#第8层
//#左#后备箱
//#路径5708
ctx.lineJoin='miter'；
ctx.strokeStyle='rgb（0,0,0）'；
ctx.lineCap='对接'
<h1>SVG Animation in HTML</h1>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="100" height="50">
    <rect x="0" y="0" width="10" height="30">
        <animate attributeName="width" attributeType="XML" begin="0s" dur="1s" from="10" to="80" repeatDur="indefinite"></animate>
        <animate attributeName="fill" attributeType="XML" begin="0s" dur="1s" from="red" to="yellow" repeatDur="indefinite"></animate>
    </rect>
</svg>