Any route to go from inkscape design to html5 with animations?

StackOverflow https://stackoverflow.com/questions/16248698

質問

I have created several designs in inkscape thinking that I could export them to svg and animate them for some simple animations I want to accompany a text based game I am creating. It seems to me that there aren't any good way to animate .svg files? I looked at raphealjs however it doesn't seem to be able to handle svg files without a shoddy plugin, that only loads black shapes.

I found this https://github.com/karlisson/ink2canvas which is a plugin to get html5 canvas with all of the objects drawn out. The output looks like this

<!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>

So now I am looking for a way to animate that. Is there some way I can convert this output to raphaeljs objects or something similar, I have been looking at solutions all day and have been unable to find a reasonable solution. I am not against going back to just the svg file and going an entirely different route.

役に立ちましたか？

解決

You can actually embed SVG directly on web pages. Additionally, I don't know if Inkscape supports it, but SVG itself supports animations with SMIL. These can be readily combined:

<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>

Try it.

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top