svg动图-让你的图标动起来
猿音
帮助1人
在网站上看到一些有趣的东西，一些svg动态图标，由于不太精通svg所以花了几个小时才把svg动态图标给弄出来，不过只限于线条的svg图标先看看效果
(图标素材来源于网络）
这些素材全都是在网络上找的，如果没有图标素材可以到iconfont下载
废话不多说上代码
<div id="svgTransfer1" style="width: 64px; height: 64px">
<svg
xmlns="http://www.w3.org/2000/svg"
width="64"
height="64"
viewBox="0 0 64 64"
id="svgMerchant1"
>
<g fill="none" fill-rule="evenodd">
<rect width="64" height="64"></rect>
<path
stroke="#595757"
stroke-width="2"
d="M32,58 C46.3594035,58 58,46.3594035 58,32 C58,17.6405965 46.3594035,6 32,6 C17.6405965,6 6,17.6405965 6,32 C6,46.3594035 17.6405965,58 32,58 Z"
style="stroke-dasharray: 163.386, 163.386; stroke-dashoffset: 0"
></path>
<path
stroke="#FCC800"
stroke-width="2"
d="M20.8386241,24.5135856 L22.865393,25.6201548 L21.9731048,21.1846473 C19.0250373,25.6201548 18,29.1296087 18,32 C18,39.7319865 24.2680135,46 32,46 C34.2244237,46 36.3276799,45.4812205 38.1953793,44.5580511 M43.3638461,39.7409451 L41.1898276,38.4488854 L41.9788214,42.8252733 C44.6596071,38.8206722 46,35.2122477 46,32 C46,24.2680135 39.7319865,18 32,18 C29.8147505,18 27.7464384,18.5006679 25.9035152,19.3935521"
style="stroke-dasharray: 93.922, 93.922; stroke-dashoffset: 0"
></path>
<circle
id="椭圆形备份"
stroke="#595757"
stroke-width="2"
fill="#FCC800"
cx="32"
cy="32"
r="5"
></circle>
</g>
</svg>
</div>
<div id="svgTransfer2" style="width: 64px; height: 64px">
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="64"
height="64"
viewBox="0 0 64 64"
id="svgMerchant2"
>
<defs>
<path
id="icon-merchant-feature-copy-a"
d="M22,56 C25.8659932,56 29,52.8659932 29,49 C29,45.1340068 25.8659932,42 22,42 C18.1340068,42 15,45.1340068 15,49 C15,52.8659932 18.1340068,56 22,56 Z"
style="stroke-dasharray: 43.9885, 43.9885; stroke-dashoffset: 0"
></path>
<path
id="icon-merchant-feature-copy-b"
d="M46,56 C49.8659932,56 53,52.8659932 53,49 C53,45.1340068 49.8659932,42 46,42 C42.1340068,42 39,45.1340068 39,49 C39,52.8659932 42.1340068,56 46,56 Z"
style="stroke-dasharray: 43.9885, 43.9885; stroke-dashoffset: 0"
></path>
</defs>
<g fill="none" fill-rule="evenodd">
<rect width="64" height="64"></rect>
<path
stroke="#595757"
stroke-width="2"
d="M0,8 L12,8"
style="stroke-dasharray: 12, 12; stroke-dashoffset: 0"
></path>
<polyline
stroke="#595757"
stroke-width="2"
points="13 41 13 46 46 46"
style="stroke-dasharray: 38, 38; stroke-dashoffset: 0"
></polyline>
<path
stroke="#595757"
stroke-width="2"
d="M7.2198039,13 L12.7862555,40.8322581 L53.1388699,33.1460458 L56.8017873,13 L7.2198039,13 Z"
style="stroke-dasharray: 139.52, 139.52; stroke-dashoffset: 0"
></path>
<use fill="#FCC800" xlink:href="#icon-merchant-feature-copy-a"></use>
<path
stroke="#595757"
stroke-width="2"
d="M22,55 C25.3137085,55 28,52.3137085 28,49 C28,45.6862915 25.3137085,43 22,43 C18.6862915,43 16,45.6862915 16,49 C16,52.3137085 18.6862915,55 22,55 Z"
style="stroke-dasharray: 37.7045, 37.7045; stroke-dashoffset: 0"
></path>
<path
fill="#FFFFFF"
stroke="#595757"
stroke-width="2"
d="M22,51 C23.1045695,51 24,50.1045695 24,49 C24,47.8954305 23.1045695,47 22,47 C20.8954305,47 20,47.8954305 20,49 C20,50.1045695 20.8954305,51 22,51 Z"
style="stroke-dasharray: 12.5682, 12.5682; stroke-dashoffset: 0"
></path>
<use fill="#FCC800" xlink:href="#icon-merchant-feature-copy-b"></use>
<path
stroke="#595757"
stroke-width="2"
d="M46,55 C49.3137085,55 52,52.3137085 52,49 C52,45.6862915 49.3137085,43 46,43 C42.6862915,43 40,45.6862915 40,49 C40,52.3137085 42.6862915,55 46,55 Z"
style="stroke-dasharray: 37.7045, 37.7045; stroke-dashoffset: 0"
></path>
<path
fill="#FFFFFF"
stroke="#595757"
stroke-width="2"
d="M46,51 C47.1045695,51 48,50.1045695 48,49 C48,47.8954305 47.1045695,47 46,47 C44.8954305,47 44,47.8954305 44,49 C44,50.1045695 44.8954305,51 46,51 Z"
style="stroke-dasharray: 12.5682, 12.5682; stroke-dashoffset: 0"
></path>
<path
stroke="#FCC800"
stroke-width="2"
d="M20 19L20 30M28 19L28 30M36 19L36 30M44 19L44 30"
style="stroke-dasharray: 44, 44; stroke-dashoffset: 0"
></path>
</g>
</svg>
</div>
<div id="svgTransfer3" style="width: 60px; height: 60px">
<svg
xmlns="http://www.w3.org/2000/svg"
width="64"
height="64"
viewBox="0 0 64 64"
id="svgMerchant3"
>
<g fill="none" fill-rule="evenodd">
<rect width="64" height="64"></rect>
<path
fill="#FCC800"
d="M8.71389309,32 C10.4451626,36.8832934 13.5336723,41.8179435 17.8578644,46.1421356 C22.1820565,50.4663277 27.1167066,53.5548374 32,55.2861069 C36.8832934,53.5548374 41.8179435,50.4663277 46.1421356,46.1421356 C50.4663277,41.8179435 53.5548374,36.8832934 55.2861069,32 C53.5548374,27.1167066 50.4663277,22.1820565 46.1421356,17.8578644 C41.8179435,13.5336723 36.8832934,10.4451626 32,8.71389309 C27.1167066,10.4451626 22.1820565,13.5336723 17.8578644,17.8578644 C13.5336723,22.1820565 10.4451626,27.1167066 8.71389309,32 Z M17.8578644,46.1421356 C6.53265992,34.8169312 3.68341751,19.3043892 11.4939033,11.4939033 C19.3043892,3.68341751 34.8169312,6.53265992 46.1421356,17.8578644 C57.4673401,29.1830688 60.3165825,44.6956108 52.5060967,52.5060967 C44.6956108,60.3165825 29.1830688,57.4673401 17.8578644,46.1421356 Z"
style="stroke-dasharray: 291.087, 291.087; stroke-dashoffset: 0"
></path>
<path
stroke="#595757"
stroke-width="2"
d="M12.3170404,51.6829596 C19.8140048,59.179924 34.7038565,56.4450533 45.5744549,45.5744549 C56.4450533,34.7038565 59.179924,19.8140048 51.6829596,12.3170404 C44.1859952,4.82007597 29.2961435,7.55494668 18.4255451,18.4255451 C7.55494668,29.2961435 4.82007597,44.1859952 12.3170404,51.6829596 Z"
style="stroke-dasharray: 149.029, 149.029; stroke-dashoffset: 0"
></path>
<path
stroke="#595757"
stroke-width="2"
d="M18.4255451,45.5744549 C29.2961435,56.4450533 44.1859952,59.179924 51.6829596,51.6829596 C59.179924,44.1859952 56.4450533,29.2961435 45.5744549,18.4255451 C34.7038565,7.55494668 19.8140048,4.82007597 12.3170404,12.3170404 C4.82007597,19.8140048 7.55494668,34.7038565 18.4255451,45.5744549 Z"
style="stroke-dasharray: 149.029, 149.029; stroke-dashoffset: 0"
></path>
<path
stroke="#FCC800"
stroke-width="2"
d="M32,42 C37.5228475,42 42,37.5228475 42,32 C42,26.4771525 37.5228475,22 32,22 C26.4771525,22 22,26.4771525 22,32 C22,37.5228475 26.4771525,42 32,42 Z"
style="stroke-dasharray: 62.8408, 62.8408; stroke-dashoffset: 0"
></path>
<polygon
stroke="#FCC800"
stroke-width="2"
points="28.993 28.993 34.993 28.993 34.993 34.993 28.993 34.993"
transform="rotate(45 31.993 31.993)"
></polygon>
</g>
</svg>
</div>
<div id="svgTransfer4" style="width: 64px; height: 64px">
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="64"
height="64"
viewBox="0 0 64 64"
id="svgMerchant4"
>
<defs>
<circle
id="icon-nongxin-feature-copy-a"
cx="50"
cy="46"
r="4"
></circle>
</defs>
<g fill="none" fill-rule="evenodd">
<rect width="64" height="64"></rect>
<path
stroke="#595757"
stroke-width="2"
d="M11,8 L11,56 L51.5857864,56 L53,54.5857864 L53,8 L11,8 Z"
style="stroke-dasharray: 179.172, 179.172; stroke-dashoffset: 0"
></path>
<rect width="2" height="12" x="31" y="22" fill="#FCC800"></rect>
<path
fill="#FCC800"
d="M50,60 C44.4771525,56 40,52.5228475 40,46 C40,40.4771525 44.4771525,36 50,36 C55.5228475,36 60,40.4771525 60,46 C60,52.5228475 55.5228475,56 50,60 Z M50,49 C51.6568542,49 53,47.6568542 53,46 C53,44.3431458 51.6568542,43 50,43 C48.3431458,43 47,44.3431458 47,46 C47,47.6568542 48.3431458,49 50,49 Z"
style="stroke-dasharray: 86.248, 86.248; stroke-dashoffset: 0"
></path>
<path
stroke="#595757"
stroke-width="2"
d="M50,58.7626977 C56.8128281,53.766809 59,50.9897483 59,46 C59,41.0294373 54.9705627,37 50,37 C45.0294373,37 41,41.0294373 41,46 C41,50.9897483 43.1871719,53.766809 50,58.7626977 Z"
style="stroke-dasharray: 60.9624, 60.9624; stroke-dashoffset: 0"
></path>
<use fill="#FFF" xlink:href="#icon-nongxin-feature-copy-a"></use>
<circle
cx="50"
cy="46"
r="3"
stroke="#595757"
stroke-width="2"
></circle>
<path
stroke="#FCC800"
stroke-width="2"
d="M32,22 L32,34"
style="stroke-dasharray: 12, 12; stroke-dashoffset: 0"
></path>
<polyline
stroke="#FCC800"
stroke-width="2"
points="40 33 32 41 24.004 33"
style="stroke-dasharray: 22.6246, 22.6246; stroke-dashoffset: 0"
></polyline>
</g>
</svg>
</div>
<div id="svgTransfer5" style="width: 64px; height: 64px">
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="64"
height="64"
viewBox="0 0 64 64"
id="svgMerchant5"
>
<defs>
<polygon
id="icon-loan-feature-copy-a"
points="9 8 17 8 17 52 13 58 9 52"
></polygon>
</defs>
<g fill="none" fill-rule="evenodd">
<rect width="64" height="64"></rect>
<path
stroke="#595757"
stroke-width="2"
d="M22,9 L22,55 L56,55 L56,16.4807211 L46.6460989,9 L22,9 Z"
style="stroke-dasharray: 155.143, 155.143; stroke-dashoffset: 0"
></path>
<path
stroke="#FCC800"
stroke-width="2"
d="M45,49 C47.7614237,49 50,46.7614237 50,44 C50,41.2385763 47.7614237,39 45,39 C42.2385763,39 40,41.2385763 40,44 C40,46.7614237 42.2385763,49 45,49 Z"
style="stroke-dasharray: 31.4204, 31.4204; stroke-dashoffset: 0"
></path>
<polyline
stroke="#595757"
stroke-width="2"
points="9 13 7 13 7 26"
style="stroke-dasharray: 15, 15; stroke-dashoffset: 0"
></polyline>
<path
stroke="#595757"
stroke-width="2"
d="M29 21L43 21M29 25L47 25"
style="stroke-dasharray: 32, 32; stroke-dashoffset: 0"
></path>
<g>
<use fill="#FCC800" xlink:href="#icon-loan-feature-copy-a"></use>
<path
stroke="#595757"
stroke-width="2"
d="M10,9 L10,51.6972244 L13,56.1972244 L16,51.6972244 L16,9 L10,9 Z"
style="stroke-dasharray: 102.211, 102.211; stroke-dashoffset: 0"
></path>
</g>
</g>
</svg>
</div>
<script>
setAnimal("svgTransfer1", "#svgMerchant1");
setAnimal("svgTransfer2", "#svgMerchant2");
setAnimal("svgTransfer3", "#svgMerchant3");
setAnimal("svgTransfer4", "#svgMerchant4");
setAnimal("svgTransfer5", "#svgMerchant5");
setAnimal("svgTransfer6", "#svgMerchant6");
function setAnimal(wd, svgId) {
var svgAnm = document.getElementById(wd);
var svgPath = document.querySelectorAll(svgId " path");
var arr = [];
for (let i = 0; i < svgPath.length; i ) {
arr[i] = svgPath[i].style.strokeDasharray.split(",")[0];
}
var barr = JSON.parse(JSON.stringify(arr));
var timerTimeCount = null;
var flag = false;
var speed = 30;
svgAnm.addEventListener("mouseenter", function () {
if (flag) return;
flag = true;
arr = JSON.parse(JSON.stringify(barr));
console.log(arr);
clearInterval(timerTimeCount);
timerTimeCount = null;
timerTimeCount = setInterval(a, 20);
});
svgAnm.addEventListener("mouseleave", function () {
flag = false;
});
var a = function () {
for (let i = 0; i < svgPath.length; i ) {
svgPath[i].style.strokeDashoffset = arr[i];
}
var nav = true;
for (let j = 0; j < arr.length; j ) {
arr[j] = arr[j] - barr[j] / speed;
if (arr[j] <= 0) {
arr[j] = 0;
} else {
nav = false;
}
}
if (nav) {
for (let i = 0; i < svgPath.length; i ) {
svgPath[i].style.strokeDashoffset = arr[i];
}
arr = JSON.parse(JSON.stringify(barr));
clearInterval(timerTimeCount);
timerTimeCount = null;
}
};
}
</script>
由于我也不太精通svg,所以也不做过多的注解，等有时间在慢慢的吧svg的知识学起来，如果自己想制作svg图标可以下载AI软件来制作，也可以用iconfont的图标导出svg格式自己尝试一下，如果有什么写的不好的也帮忙指出来一下，一起学习，一起进步！
这篇好文章是转载于：学新通技术网
- 版权申明： 本站部分内容来自互联网，仅供学习及演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，请提供相关证据及您的身份证明，我们将在收到邮件后48小时内删除。
- 本站站名： 学新通技术网
- 本文地址： /boutique/detail/tanhgeihbg
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储，并分享文件
Luke 10-12 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01
