从inkscape设计到带有动画的html5有啥途径吗？
Posted
技术标签:
【中文标题】从inkscape设计到带有动画的html5有啥途径吗？【英文标题】：Any route to go from inkscape design to html5 with animations?从inkscape设计到带有动画的html5有什么途径吗？ 【发布时间】：2013-04-21 08:26:08 【问题描述】：我在 inkscape 中创建了几个设计，我认为我可以将它们导出为 svg 并为它们制作一些简单的动画，以配合我正在创建的基于文本的游戏。在我看来，没有任何好方法可以为 .svg 文件设置动画？我查看了 raphealjs，但它似乎无法在没有伪劣插件的情况下处理 svg 文件，该插件只能加载黑色形状。
我发现了这个https://github.com/karlisson/ink2canvas，它是一个插件，用于获取 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>
所以现在我正在寻找一种动画方法。有什么方法可以将此输出转换为 raphaeljs 对象或类似的东西，我整天都在寻找解决方案，但无法找到合理的解决方案。我不反对只使用 svg 文件并走一条完全不同的路线。
【问题讨论】：
【参考方案1】：您实际上可以将 SVG 直接嵌入到网页中。另外，我不知道 Inkscape 是否支持它，但 SVG 本身支持带有 SMIL 的动画。这些可以很容易地组合：
<h1>SVG Animation in HTML</h1>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" >
<rect x="0" y="0" >
<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.
【讨论】：
谢谢，这可能是要走的路。谢谢，或者使用嵌入标签。但是，我认为将 svg 写入页面可能是最好的方法。然后我可以从数据库中加载不同的对象:)以上是关于从inkscape设计到带有动画的html5有啥途径吗？的主要内容，如果未能解决你的问题，请参考以下文章
使用 HTML5 嵌入式视频与使用带有 YouTube 链接的 iframe 有啥区别？