SVG如何实现描边动画-创新互联

这篇文章给大家分享的是有关SVG如何实现描边动画的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

为弓长岭等地区用户提供了全套网页设计制作服务，及弓长岭网站建设行业解决方案。主营业务为成都做网站、成都网站建设、弓长岭网站设计，以传统方式定制建设网站，并提供域名空间备案等一条龙服务，秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求，就会得到认可，从而选择与我们长期合作。这样，我们也可以走得更远！

效果如下：

SVG如何实现描边动画

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>nubia</title>
 <style>
 .nubia_logo{
 position: absolute;
 opacity: 0;
 animation:fadeIn 2s ease-in forwards;
  -webkit-animation:fadeIn 2s ease-in forwards;
 top: 50%;
 -ms-transform: translateY(-50%);
 -webkit-transform: translateY(-50%);
 -o-transform: translateY(-50%);
 transform: translateY(-50%);
 left: 50%;
 margin-left: -500px;
 }
 #nubia{
 position: absolute;
 z-index: 1;
 stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
 animation: describe 4s forwards;
  -webkit-animation: describe 4s forwards;
 top: 50%;
 -ms-transform: translateY(-50%);
 -webkit-transform: translateY(-50%);
 -o-transform: translateY(-50%);
 transform: translateY(-50%);
 left: 50%;
 margin-left: -500px;
 }
 @keyframes fadeIn{
 from{opacity: 0;}
 80%{opacity: 0.5;}
 to{opacity:1;}
 }
 @-webkit-keyframes fadeIn{
 from{opacity: 0;}
 80%{opacity: 0.5;}
 to{opacity:1;}
 }
 @keyframes describe{
 from{
  stroke-dashoffset: 2000;
  opacity: 1;
 }
 to{
  stroke-dashoffset: 0;
  opacity: 0;
 }
 }
 @-webkit-keyframes describe{
 from{
  stroke-dashoffset: 2000;
  opacity: 1;
 }
 to{
  stroke-dashoffset: 0;
  opacity: 0;
 }
 }
 </style>
</head>
<body >
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 width="1000px" height="150px" viewBox="0 0 1000 149.452" enable-background="new 0 0 1000 149.452" xml:space="preserve" class="nubia_logo">
<g display="none">
 <path display="inline" fill="none" d="M521.739,14.073c-33.516,0-60.796,27.274-60.796,60.79s27.28,60.792,60.796,60.792
 c33.518,0,60.787-27.276,60.787-60.792S555.257,14.073,521.739,14.073 M521.739,111.824c-20.38,0-36.951-16.581-36.951-36.961
 c0-20.383,16.571-36.964,36.951-36.964c20.391,0,36.963,16.581,36.963,36.964C558.702,95.243,542.13,111.824,521.739,111.824"/>
 <path display="inline" fill="none" d="M596.591,135.378c0,7.774-6.3,14.074-14.074,14.074c-7.773,0-14.074-6.3-14.074-14.074
 c0-7.773,6.3-14.074,14.074-14.074C590.291,121.304,596.591,127.605,596.591,135.378"/>
 <path display="inline" fill="none" d="M289.83,14.074c0,7.774-6.3,14.074-14.074,14.074c-7.773,0-14.074-6.3-14.074-14.074
C261.682,6.3,267.983,0,275.756,0C283.53,0,289.83,6.3,289.83,14.074"/>
 <path display="inline" fill="none" d="M436.666,14.485c-10.853,0-19.636,8.81-19.636,19.65v101.242h5.559
 c10.867,0,19.65-8.803,19.65-19.646V14.485H436.666z"/>
 <path display="inline" fill="none" d="M247.274,19.6c-10.857,0-19.642,8.799-19.642,19.638v4.376c0,0.104-0.013,0.204-0.013,0.308
 V77.62c0,18.645-15.17,33.818-33.818,33.818s-33.824-15.172-33.824-33.818V43.921c0-0.089-0.015-0.175-0.015-0.264v-4.419
 c0-10.838-8.778-19.638-19.631-19.638h-4.565v0.1v24.221v33.734v0.015c0,31.997,26.027,58.043,58.035,58.043
 c31.997,0,58.028-26.046,58.028-58.043V19.6H247.274z"/>
 <path display="inline" fill="none" d="M116.063,72.068c-0.013-31.993-26.034-58.014-58.022-58.014
C26.038,14.054,0.012,40.075,0,72.068v0.025v33.722v24.211v0.137h5.561c10.857,0,19.64-8.808,19.64-19.644v-4.575
 c0-0.046,0.004-0.089,0.004-0.129V72.107h0.01c0-18.649,15.168-33.813,33.826-33.813c18.643,0,33.813,15.164,33.813,33.813h0.004
v33.707v4.704c0,10.836,8.783,19.644,19.633,19.644h5.571v-0.137v-24.211V72.093V72.068z"/>
 <path display="inline" fill="none" d="M336.544,14.073c-33.516,0-60.796,27.274-60.796,60.79s27.28,60.792,60.796,60.792
 c33.518,0,60.787-27.276,60.787-60.792S370.062,14.073,336.544,14.073 M336.544,111.824c-20.38,0-36.951-16.581-36.951-36.961
 c0-20.383,16.571-36.964,36.951-36.964c20.391,0,36.964,16.581,36.964,36.964C373.507,95.243,356.935,111.824,336.544,111.824"/>
 <rect x="923.525" y="29.963" display="inline" fill="none" width="9.844" height="94.809"/>
 <rect x="954.039" y="29.963" display="inline" fill="none" width="9.842" height="94.844"/>
 <path display="inline" fill="none" d="M887.405,121.297v1.413c0,4.18,0.709,6.954,7.438,6.954h97.718
 c6.727,0,7.438-2.774,7.438-6.954v-1.413H887.405z"/>
 <path display="inline" fill="none" d="M890.383,23.391v1.413c0,4.178,0.709,6.954,7.436,6.954h91.767
 c6.727,0,7.436-2.776,7.436-6.954v-1.413H890.383z"/>
 <path display="inline" fill="none" d="M779.799,121.297c-5.044,0-8.14-3.348-8.267-7.921V20.619h-9.846v91.107
c0,12.06,5.992,17.938,18.173,17.938h31.217c6.727,0,7.436-2.776,7.436-6.954v-1.413H779.799z"/>
 <path display="inline" fill="none" d="M726.388,84.789h-99.921v8.464h8.344c0.06,0,0.116,0.006,0.177,0.006h87.799
c0.441,0,0.801,0.358,0.801,0.801v20.27c0,5.019,0,6.966-5.137,6.966h-22.486v1.648c0,6.071,2.574,6.719,6.962,6.719h24.257
 c8.581,0,15.26-4.124,15.26-15.233V90.513C732.443,86.92,729.948,84.789,726.388,84.789"/>
 <rect x="766.47" y="51.675" display="inline" fill="none" width="42.276" height="8.366"/>
 <path display="inline" fill="none" d="M834.131,121.297c-5.044,0-8.14-3.348-8.267-7.921V20.619h-9.844v91.107
c0,12.06,5.99,17.938,18.173,17.938h37.738c6.727,0,7.437-2.776,7.437-6.954v-1.413H834.131z"/>
 <path display="inline" fill="none" d="M825.511,51.676v8.367h44.633c6.725,0,7.436-2.778,7.436-6.956v-1.411H825.511z"/>
 <path display="inline" fill="none" d="M678.658,31.37v-3.514c0-1.739-0.757-2.649-2.353-2.649h-26.843l2.547-6.702h-9.501
 l-2.547,6.702h-14.937v2.31c0,4.024,0.691,6.169,6.123,6.169h6.589l-1.392,3.664l-0.06,0.158
 c-3.042,8.959-3.774,12.803,2.595,20.959l0.189,0.225c2.083,2.347,4.64,4.505,7.449,6.475c-4.99,2.545-11.082,4.752-19.049,6.798
 v8.179c10.204-1.956,19.207-5.739,26.816-10.266c10.106,5.364,20.913,8.672,24.958,9.817v-8.468
 c-4.592-1.303-10.905-3.585-17.049-6.671C674.594,54.145,678.658,39.454,678.658,31.37 M654.191,59.63
 c-0.219,0.175-0.445,0.341-0.668,0.514c-3.396-2.251-6.425-3.487-8.658-6.213c-3.423-4.292-3.702-6.128-1.263-13.319l2.634-6.927
h32.507C668.743,40.517,664.006,51.827,654.191,59.63"/>
 <path display="inline" fill="none" d="M892.901,46.448l1.119-0.154c4.326-0.603,7.896,0.472,8.895,5.62l8.458,48.299
 c0.472,2.73-1.357,5.329-4.082,5.803l-3.893,0.676L892.901,46.448z"/>
 <path display="inline" fill="none" d="M994.504,46.448l-1.122-0.154c-4.324-0.603-7.894,0.472-8.893,5.62l-8.458,48.299
 c-0.472,2.73,1.357,5.329,4.082,5.803l3.893,0.676L994.504,46.448z"/>
 <path display="inline" fill="none" d="M668.343,81.123c-6.71,19.725-21.335,34.142-43.318,40.216v8.323
 c25.027-4.971,45.74-23.612,52.974-48.538H668.343z"/>
 <path display="inline" fill="none" d="M733.078,31.372v-3.516c0-1.739-0.737-2.647-2.291-2.647h-45.411
 c-1.554,0-2.293,0.907-2.293,2.647v3.516c0,8.025,4.355,22.819,17.201,33.231c-4.347,2.792-10.724,4.89-16.837,6.644v8.481
 c9.157-2.031,17.557-5.564,24.633-9.754c7.006,4.149,15.316,7.634,24.361,9.673V71.09c-6.013-1.744-12.06-3.905-16.34-6.656
 C728.948,54.024,733.078,39.397,733.078,31.372 M708.08,60.018c-9.128-6.45-15.333-18.978-15.333-26.331h40.665
 C723.413,41.041,717.206,53.568,708.08,60.018"/>
</g>
<g>
 <path fill="#E8380D" d="M521.739,14.073c-33.516,0-60.796,27.274-60.796,60.79s27.28,60.792,60.796,60.792
 c33.518,0,60.787-27.276,60.787-60.792S555.257,14.073,521.739,14.073 M521.739,111.824c-20.38,0-36.951-16.581-36.951-36.961
 c0-20.383,16.571-36.964,36.951-36.964c20.391,0,36.963,16.581,36.963,36.964C558.702,95.243,542.13,111.824,521.739,111.824"/>
 <path fill="#E8380D" d="M596.591,135.378c0,7.774-6.3,14.074-14.074,14.074c-7.773,0-14.074-6.3-14.074-14.074
 c0-7.773,6.3-14.074,14.074-14.074C590.291,121.304,596.591,127.605,596.591,135.378"/>
 <path fill="#727171" d="M289.83,14.074c0,7.774-6.3,14.074-14.074,14.074c-7.773,0-14.074-6.3-14.074-14.074
C261.682,6.3,267.983,0,275.756,0C283.53,0,289.83,6.3,289.83,14.074"/>
 <path fill="#727171" d="M436.666,14.485c-10.853,0-19.636,8.81-19.636,19.65v101.242h5.559c10.867,0,19.65-8.803,19.65-19.646
 V14.485H436.666z"/>
 <path fill="#727171" d="M247.274,19.6c-10.857,0-19.642,8.799-19.642,19.638v4.376c0,0.104-0.013,0.204-0.013,0.308V77.62
 c0,18.645-15.17,33.818-33.818,33.818s-33.824-15.172-33.824-33.818V43.921c0-0.089-0.015-0.175-0.015-0.264v-4.419
 c0-10.838-8.778-19.638-19.631-19.638h-4.565v0.1v24.221v33.734v0.015c0,31.997,26.027,58.043,58.035,58.043
 c31.997,0,58.028-26.046,58.028-58.043V19.6H247.274z"/>
 <path fill="#727171" d="M116.063,72.068c-0.013-31.993-26.034-58.014-58.022-58.014C26.038,14.054,0.012,40.075,0,72.068v0.025
 v33.722v24.211v0.137h5.561c10.857,0,19.64-8.808,19.64-19.644v-4.575c0-0.046,0.004-0.089,0.004-0.129V72.107h0.01
 c0-18.649,15.168-33.813,33.826-33.813c18.643,0,33.813,15.164,33.813,33.813h0.004v33.707v4.704
 c0,10.836,8.783,19.644,19.633,19.644h5.571v-0.137v-24.211V72.093V72.068z"/>
 <path fill="#727171" d="M336.544,14.073c-33.516,0-60.796,27.274-60.796,60.79s27.28,60.792,60.796,60.792
 c33.518,0,60.787-27.276,60.787-60.792S370.062,14.073,336.544,14.073 M336.544,111.824c-20.38,0-36.951-16.581-36.951-36.961
 c0-20.383,16.571-36.964,36.951-36.964c20.391,0,36.964,16.581,36.964,36.964C373.507,95.243,356.935,111.824,336.544,111.824"/>
 <rect x="923.525" y="29.963" fill="#727171" width="9.844" height="94.809"/>
 <rect x="954.039" y="29.963" fill="#727171" width="9.842" height="94.844"/>
 <path fill="#727171" d="M887.405,121.297v1.413c0,4.18,0.709,6.954,7.438,6.954h97.718c6.727,0,7.438-2.774,7.438-6.954v-1.413
 H887.405z"/>
 <path fill="#727171" d="M890.383,23.391v1.413c0,4.178,0.709,6.954,7.436,6.954h91.767c6.727,0,7.436-2.776,7.436-6.954v-1.413
 H890.383z"/>
 <path fill="#727171" d="M779.799,121.297c-5.044,0-8.14-3.348-8.267-7.921V20.619h-9.846v91.107
c0,12.06,5.992,17.938,18.173,17.938h31.217c6.727,0,7.436-2.776,7.436-6.954v-1.413H779.799z"/>
 <path fill="#727171" d="M726.388,84.789h-99.921v8.464h8.344c0.06,0,0.116,0.006,0.177,0.006h87.799
c0.441,0,0.801,0.358,0.801,0.801v20.27c0,5.019,0,6.966-5.137,6.966h-22.486v1.648c0,6.071,2.574,6.719,6.962,6.719h24.257
 c8.581,0,15.26-4.124,15.26-15.233V90.513C732.443,86.92,729.948,84.789,726.388,84.789"/>
 <rect x="766.47" y="51.675" fill="#727171" width="42.276" height="8.366"/>
 <path fill="#727171" d="M834.131,121.297c-5.044,0-8.14-3.348-8.267-7.921V20.619h-9.844v91.107c0,12.06,5.99,17.938,18.173,17.938
 h37.738c6.727,0,7.437-2.776,7.437-6.954v-1.413H834.131z"/>
 <path fill="#727171" d="M825.511,51.676v8.367h44.633c6.725,0,7.436-2.778,7.436-6.956v-1.411H825.511z"/>
 <path fill="#727171" d="M678.658,31.37v-3.514c0-1.739-0.757-2.649-2.353-2.649h-26.843l2.547-6.702h-9.501l-2.547,6.702h-14.937
 v2.31c0,4.024,0.691,6.169,6.123,6.169h6.589l-1.392,3.664l-0.06,0.158c-3.042,8.959-3.774,12.803,2.595,20.959l0.189,0.225
 c2.083,2.347,4.64,4.505,7.449,6.475c-4.99,2.545-11.082,4.752-19.049,6.798v8.179c10.204-1.956,19.207-5.739,26.816-10.266
 c10.106,5.364,20.913,8.672,24.958,9.817v-8.468c-4.592-1.303-10.905-3.585-17.049-6.671
 C674.594,54.145,678.658,39.454,678.658,31.37 M654.191,59.63c-0.219,0.175-0.445,0.341-0.668,0.514
 c-3.396-2.251-6.425-3.487-8.658-6.213c-3.423-4.292-3.702-6.128-1.263-13.319l2.634-6.927h32.507
 C668.743,40.517,664.006,51.827,654.191,59.63"/>
 <path fill="#727171" d="M892.901,46.448l1.119-0.154c4.326-0.603,7.896,0.472,8.895,5.62l8.458,48.299
 c0.472,2.73-1.357,5.329-4.082,5.803l-3.893,0.676L892.901,46.448z"/>
 <path fill="#727171" d="M994.504,46.448l-1.122-0.154c-4.324-0.603-7.894,0.472-8.893,5.62l-8.458,48.299
 c-0.472,2.73,1.357,5.329,4.082,5.803l3.893,0.676L994.504,46.448z"/>
 <path fill="#727171" d="M668.343,81.123c-6.71,19.725-21.335,34.142-43.318,40.216v8.323c25.027-4.971,45.74-23.612,52.974-48.538
 H668.343z"/>
 <path fill="#727171" d="M733.078,31.372v-3.516c0-1.739-0.737-2.647-2.291-2.647h-45.411c-1.554,0-2.293,0.907-2.293,2.647v3.516
 c0,8.025,4.355,22.819,17.201,33.231c-4.347,2.792-10.724,4.89-16.837,6.644v8.481c9.157-2.031,17.557-5.564,24.633-9.754
 c7.006,4.149,15.316,7.634,24.361,9.673V71.09c-6.013-1.744-12.06-3.905-16.34-6.656C728.948,54.024,733.078,39.397,733.078,31.372
 M708.08,60.018c-9.128-6.45-15.333-18.978-15.333-26.331h40.665C723.413,41.041,717.206,53.568,708.08,60.018"/>
</g>
</svg>
<svg version="1.1" id="nubia" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 width="1000px" height="150px" viewBox="0 0 1000 149.452" enable-background="new 0 0 1000 149.452" xml:space="preserve">
<g>
 <path fill="none" data-duration="60" stroke="#ffffff" stroke-width="1" d="M521.739,14.073c-33.516,0-60.796,27.274-60.796,60.79s27.28,60.792,60.796,60.792
 c33.518,0,60.787-27.276,60.787-60.792S555.257,14.073,521.739,14.073 M521.739,111.824c-20.38,0-36.951-16.581-36.951-36.961
 c0-20.383,16.571-36.964,36.951-36.964c20.391,0,36.963,16.581,36.963,36.964C558.702,95.243,542.13,111.824,521.739,111.824"/>
 <path fill="none" data-duration="60" stroke="#ffffff" stroke-width="1" d="M596.591,135.378c0,7.774-6.3,14.074-14.074,14.074c-7.773,0-14.074-6.3-14.074-14.074
 c0-7.773,6.3-14.074,14.074-14.074C590.291,121.304,596.591,127.605,596.591,135.378"/>
 <path fill="none" data-duration="60" stroke="#ffffff" stroke-width="1" d="M289.83,14.074c0,7.774-6.3,14.074-14.074,14.074c-7.773,0-14.074-6.3-14.074-14.074
C261.682,6.3,267.983,0,275.756,0C283.53,0,289.83,6.3,289.83,14.074"/>
 <path fill="none" data-duration="60" stroke="#ffffff" stroke-width="1" d="M436.666,14.485c-10.853,0-19.636,8.81-19.636,19.65v101.242h5.559c10.867,0,19.65-8.803,19.65-19.646V14.485
 H436.666z"/>
 <path fill="none" data-duration="60" stroke="#ffffff" stroke-width="1" d="M247.274,19.6c-10.857,0-19.642,8.799-19.642,19.638v4.376c0,0.104-0.013,0.204-0.013,0.308V77.62
 c0,18.645-15.17,33.818-33.818,33.818s-33.824-15.172-33.824-33.818V43.921c0-0.089-0.015-0.175-0.015-0.264v-4.419
 c0-10.838-8.778-19.638-19.631-19.638h-4.565v0.1v24.221v33.734v0.015c0,31.997,26.027,58.043,58.035,58.043
 c31.997,0,58.028-26.046,58.028-58.043V19.6H247.274z"/>
 <path fill="none" data-duration="60" stroke="#ffffff" stroke-width="1" d="M116.063,72.068c-0.013-31.993-26.034-58.014-58.022-58.014C26.038,14.054,0.012,40.075,0,72.068v0.025v33.722
 v24.211v0.137h5.561c10.857,0,19.64-8.808,19.64-19.644v-4.575c0-0.046,0.004-0.089,0.004-0.129V72.107h0.01
 c0-18.649,15.168-33.813,33.826-33.813c18.643,0,33.813,15.164,33.813,33.813h0.004v33.707v4.704
 c0,10.836,8.783,19.644,19.633,19.644h5.571v-0.137v-24.211V72.093V72.068z"/>
 <path fill="none" data-duration="60" stroke="#ffffff" stroke-width="1" d="M336.544,14.073c-33.516,0-60.796,27.274-60.796,60.79s27.28,60.792,60.796,60.792
 c33.518,0,60.787-27.276,60.787-60.792S370.062,14.073,336.544,14.073 M336.544,111.824c-20.38,0-36.951-16.581-36.951-36.961
 c0-20.383,16.571-36.964,36.951-36.964c20.391,0,36.964,16.581,36.964,36.964C373.507,95.243,356.935,111.824,336.544,111.824"/>
 <path fill="none" data-duration="60" stroke="#ffffff" stroke-width="1" d="M963.88,121.297v-89.54h35.706c6.727,0,7.436-2.776,7.436-6.954v-1.413h-106.64v1.413
 c0,4.178,0.709,6.954,7.436,6.954h35.706v89.54h-36.12v1.413c0,4.18,0.709,6.954,7.438,6.954h97.718
 c6.727,0,7.438-2.774,7.438-6.954v-1.413H963.88z M933.369,31.757h30.67v89.54h-20.67V31.757z"/>
 <path fill="none" data-duration="60" stroke="#ffffff" stroke-width="1" d="M808.746,60.041v-8.366h-37.213V20.619h-9.846v91.107c0,12.06,5.992,17.938,18.173,17.938h31.217
 c6.727,0,7.437-2.776,7.437-6.954v-1.413h-28.714c-5.044,0-8.14-3.348-8.267-7.921V60.041H808.746z"/>
 <path fill="none" data-duration="60" stroke="#ffffff" stroke-width="1" d="M834.131,121.297c-5.044,0-8.14-3.348-8.267-7.921V60.043h44.28c6.725,0,7.436-2.778,7.436-6.956v-1.411
 h-41.716V20.619h-9.844v91.107c0,12.06,5.99,17.938,18.173,17.938h37.738c6.727,0,7.437-2.776,7.437-6.954v-1.413H834.131z"/>
 <path fill="none" data-duration="60" stroke="#ffffff" stroke-width="1" d="M678.658,31.37v-3.514c0-1.739-0.757-2.649-2.353-2.649h-26.843l2.547-6.702h-9.501l-2.547,6.702h-14.937v2.31
 c0,4.024,0.691,6.169,6.123,6.169h6.589l-1.392,3.664l-0.06,0.158c-3.042,8.959-3.774,12.803,2.595,20.959l0.189,0.225
 c2.083,2.347,4.64,4.505,7.449,6.475c-4.99,2.545-11.082,4.752-19.049,6.798v8.179c10.204-1.956,19.207-5.739,26.816-10.266
 c10.106,5.364,20.913,8.672,24.958,9.817v-8.468c-4.592-1.303-10.905-3.585-17.049-6.671
 C674.594,54.145,678.658,39.454,678.658,31.37 M654.191,59.63c-0.219,0.175-0.445,0.341-0.668,0.514
 c-3.396-2.251-6.425-3.487-8.658-6.213c-3.423-4.292-3.702-6.128-1.263-13.319l2.634-6.927h32.507
 C668.743,40.517,664.006,51.827,654.191,59.63"/>
 <path fill="none" data-duration="60" stroke="#ffffff" stroke-width="1" d="M892.901,46.448l1.119-0.154c4.326-0.603,7.896,0.472,8.895,5.62l8.458,48.299
 c0.472,2.73-1.357,5.329-4.082,5.803l-3.893,0.676L892.901,46.448z"/>
 <path fill="none" data-duration="60" stroke="#ffffff" stroke-width="1" d="M994.504,46.448l-1.122-0.154c-4.324-0.603-7.894,0.472-8.893,5.62l-8.458,48.299
 c-0.472,2.73,1.357,5.329,4.082,5.803l3.893,0.676L994.504,46.448z"/>
 <path fill="none" data-duration="60" stroke="#ffffff" stroke-width="1" d="M726.388,84.789h-49.575c0.425-1.207,0.827-2.427,1.187-3.666h-9.656c-0.423,1.243-0.878,2.465-1.364,3.666
 h-40.512v8.464h8.344c0.06,0,0.116,0.006,0.177,0.006h37.798c-7.927,13.481-20.587,23.335-37.76,28.08v8.323
 c20.768-4.125,38.557-17.669,48.147-36.402h59.614c0.441,0,0.801,0.358,0.801,0.801v20.27c0,5.019,0,6.966-5.137,6.966h-22.486
v1.648c0,6.072,2.574,6.719,6.962,6.719h24.257c8.581,0,15.26-4.124,15.26-15.233V90.513
 C732.443,86.919,729.948,84.789,726.388,84.789z"/>
 <path fill="none" data-duration="60" stroke="#ffffff" stroke-width="1" d="M733.078,31.372v-3.516c0-1.739-0.737-2.647-2.291-2.647h-45.411c-1.554,0-2.293,0.907-2.293,2.647v3.516
 c0,8.025,4.355,22.819,17.201,33.231c-4.347,2.792-10.724,4.89-16.837,6.644v8.481c9.157-2.031,17.557-5.564,24.633-9.754
 c7.006,4.149,15.316,7.634,24.361,9.673V71.09c-6.013-1.744-12.06-3.905-16.34-6.656C728.948,54.024,733.078,39.397,733.078,31.372
 M708.08,60.018c-9.128-6.45-15.333-18.978-15.333-26.331h40.665C723.413,41.041,717.206,53.568,708.08,60.018"/>
</g>
</svg>
</body>
</html>

感谢各位的阅读！关于“SVG如何实现描边动画”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！

另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

当前名称：SVG如何实现描边动画-创新互联
当前路径：https://www.cdcxhl.com/article16/cojgdg.html

成都网站建设公司_创新互联，为您提供网站改版、定制网站、关键词优化、定制开发、品牌网站建设、网站建设

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容