css 实现svg动态图标效果

效果演示：

实现思路：主要是通过css的stroke相关属性来设置实现的。

html代码:

html 复制代码

 <svg
      t="1692441666814"
      class="icon"
      viewBox="0 0 1024 1024"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      p-id="12949"
      width="40"
      height="40"
    >
      <path
        class="icon1"
        d="M689.036502 325.02992 334.416967 325.02992C324.54013 325.02992 316.556502 332.91472 316.556502 342.62992 316.556502 352.34512 324.54013 360.22992 334.416967 360.22992L689.036502 360.22992C698.895478 360.22992 706.896966 352.34512 706.896966 342.62992 706.896966 332.91472 698.895478 325.02992 689.036502 325.02992"
        fill="#9B9B9B"
        p-id="12950"
      ></path>
      <path
        class="icon1"
        d="M847.085546 454.2456C831.439776 488.3544 789.503405 508.3304 746.888336 488.988 721.508614 477.4776 709.631405 451.0072 707.738195 423.5336 707.113078 414.3816 699.361638 407.148 689.91345 407.148 680.465264 407.148 672.731683 414.3816 672.106566 423.5336 670.213357 451.0072 658.33615 477.4776 632.956429 488.988 579.071405 513.452 526.31159 475.0664 526.31159 424.748 526.31159 415.0328 518.310102 407.148 508.451126 407.148 499.002941 407.148 491.269357 414.3816 490.626381 423.5336 488.733171 451.0072 476.855962 477.4776 451.458381 488.988 397.609079 513.4344 344.849265 475.0488 344.849265 424.748 344.849265 415.0328 336.865637 407.148 326.9888 407.148 316.736893 407.148 308.503219 415.6664 309.181916 425.9272 310.289265 442.964 306.62787 460.212 294.089823 472.004 246.938195 516.3384 186.516242 494.884 168.816521 453.2072L167.798475 450.1448C166.85187 447.5928 166.048149 444.9704 165.423033 442.2952 163.297637 433.4248 163.976335 424.1848 166.780428 415.508 180.372242 373.2152 236.079033 200.1368 236.079033 200.1368 236.722009 198.1304 240.99066 195.1912 247.027498 195.1912L769.374659 195.1912C775.393638 195.1912 779.68015 198.1304 780.323126 200.1544L848.853731 410.404C853.515312 424.748 853.390288 440.5 847.085546 454.2456M738.154566 812.5112 285.284614 812.5112C263.602009 812.5112 245.938009 795.1048 245.938009 773.7208L245.938009 531.14C279.801451 528.1656 309.253358 509.9672 326.9888 483.3912 346.420986 512.484 379.802195 531.756 417.719963 531.756 455.637731 531.756 489.018941 512.484 508.451126 483.3912 527.883312 512.484 561.282381 531.756 599.182288 531.756 637.100054 531.756 670.481264 512.484 689.91345 483.3912 708.809824 511.6568 740.922941 530.5064 777.501171 531.5624L777.501171 773.7208C777.501171 795.1048 759.855034 812.5112 738.154566 812.5112M888.861171 429.9752C888.861171 427.4056 888.861171 421.8968 887.6288 417.6024 887.557357 417.3736 887.575219 417.1272 887.503776 416.8984L814.365171 189.5064C808.774848 172.1352 790.271405 159.9912 769.374659 159.9912L247.027498 159.9912C226.095033 159.9912 207.591591 172.1352 202.019125 189.5064L129.809265 416.9864C128.648335 422.7768 127.451684 431.4184 128.273265 435.9064 134.756614 477.6712 163.565544 513.276 203.072893 526.3528L203.072893 773.7208C203.072893 818.4072 239.954754 854.7512 285.284614 854.7512L738.154566 854.7512C783.484429 854.7512 820.38415 818.4072 820.38415 773.7208L820.38415 524.9448C860.516614 510.7064 888.861171 475.1192 888.861171 429.9752"
        fill="#9B9B9B"
        p-id="12951"
      ></path>
    </svg>

css代码：

css 复制代码

.icon1 {
        /* 填充颜色 */
        fill: none;
        /* 图形元素的外轮廓颜色 */
        stroke: black;
        /* 图形元素的外轮廓宽度 */
        stroke-width: 10;
        /* 两端的形状 */
        stroke-linecap: round;
      }
      @keyframes move {
        0% {
          /* 指定线条的长度和间距，第一个参数为长度，第二个为间距 */
          stroke-dasharray: 0, 600px;
        }

        100% {
          stroke-dasharray: 600px, 0;
        }
      }
      .icon:hover {
        animation: move 1s;
      }