Javascript livicons是如何制作的？

我想知道是否有人能给我一个关于这些图标是如何制作的基本分类。我看到它们是SVG，并用Raphael js制作动画，但是每个图标都画在画布上吗？或者图标是实际的svg文件，只是每个图标都用raphael.js单独设置了动画

我有一个图标，我想用我自己的，看看我是否可以动画它我自己的方式类似于那些图标。有人对这种技术有什么想法或指导吗？我一直在阅读raphael js，但它看起来主要是用于绘制SVG，然后为其设置动画，所以我不是100%

我也一直在尝试阅读inspector，但我无法真正理解每个动画都在做什么（它如何知道要操纵图标的哪个部分等？）

谢谢任何人

他们正在使用javascript和悬停事件为SVG（矢量）元素设置动画。。读一读

例如：

<svg height="32" version="1.1" width="32" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative; left: -0.5px;">
    <desc style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">Created with Raphaël 2.1.0</desc>
     <defs style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></defs>
     <path fill="#000000" stroke="none" d="M25.59,13.368C25.814,13.598,26,13.52,26,13.197V6.584C26,6.262,25.738,6,25.416,6H18.803C18.481,6,18.403000000000002,6.186,18.633,6.41L21.227,9.004L15.999,14.231L10.774000000000001,9.006L13.369000000000002,6.41C13.598,6.185,13.52,6,13.198,6H6.584C6.262,6,6,6.262,6,6.584V13.198C6,13.519,6.185,13.597000000000001,6.411,13.369L9.007,10.774L14.232,15.998999999999999L9.004999999999999,21.226999999999997L6.41,18.633C6.186,18.402,6,18.48,6,18.803V25.416C6,25.738,6.262,26,6.584,26H13.197C13.518999999999998,26,13.597,25.816,13.367999999999999,25.59L10.771999999999998,22.994L15.998999999999999,17.766L21.226999999999997,22.994L18.632999999999996,25.59C18.402999999999995,25.815,18.480999999999995,26,18.802999999999997,26H25.415999999999997C25.738,26,26,25.738,26,25.416V18.803C26,18.481,25.814,18.403000000000002,25.59,18.633L22.994,21.227L17.766,15.999L22.994,10.772L25.59,13.368Z" stroke-width="0" transform="matrix(1,0,0,1,0,0)" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path>
    <rect x="0" y="0" width="32" height="32" r="0" rx="0" ry="0" fill="#ffffff" stroke="none" stroke-width="0" opacity="0" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0;"></rect>
</svg>

使用Raphaël 2.1.0创建

我是迪伊，利维肯的作者。刚刚在我网站的统计数据中看到Stackoverflow的流量：）

答案已经给出，但无论如何，我将尝试给出一个简短的解释，我是如何创建LivIcons的

所有的魔法都在拉斐尔js库中（特别感谢德米特里·巴拉诺夫斯基）

这些图标并不总是SVG，它们是IE6-IE8中的VML

第一步是为任何矢量软件（如Adobe Illustrator）中的每个图标形状创建SVG文件，其中包含路径

如果动画不简单（如旋转、移动或缩放），则需要为每个帧创建其他路径。因此，动画将从头到尾遍历这些帧

然后，为脚本获取这些路径的值

在Raphaeljs的帮助下，您可以在一个函数中为图标Paper.path（[pathString]）方法创建初始状态，并使用Element.animate（…）方法为这些路径设置动画。此函数还可以捕获悬停或单击事件，并更改悬停时的颜色

这是一个很短的指南。在4个月的时间里，我一直在制作前303个图标。如果你有时间和志向，你也可以试试

祝你好运

---

Dee

嘿，谢谢你的宝贵意见。我一直在读它，看起来很复杂。我得试一试，看看能想出什么办法。我想学习更多的知识，而不是任何东西。你知道的越多越好！再次感谢！