javascript - SVG 动画（ICO 到 SVG 文件）

Question

我正在尝试为我的 SVG 设置动画，我使用在线转换器将其从 .ICO 转换为 .SVG，现在的问题是我无法为 strokedasharray 和 strokedashoffset 设置动画。我试图在下面的 codepen 链接中创建一个动画，使我的 SVG 看起来像那样，我尝试使用填充但它不起作用，无论如何要解决这个问题。我的 SVG 代码如下。如果我能得到帮助，我会很高兴，我不能使用插画家，我只是开发新手 https://codepen.io/chriscoyier/pen/bGyoz

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
 "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 width="56.000000px" height="56.000000px" viewBox="0 0 256.000000 256.000000"
 preserveAspectRatio="xMidYMid meet">

<g transform="translate(0.000000,256.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M670 2485 c0 -8 -7 -15 -15 -15 -9 0 -18 -7 -21 -15 -4 -8 -17 -15
-30 -15 -14 0 -27 -7 -30 -15 -4 -8 -17 -15 -30 -15 -14 0 -27 -7 -30 -15 -4
-8 -17 -15 -30 -15 -14 0 -27 -7 -30 -15 -4 -8 -12 -15 -20 -15 -8 0 -14 -7
-14 -15 0 -9 -9 -15 -25 -15 -14 0 -28 -7 -31 -15 -4 -8 -17 -15 -30 -15 -14
0 -27 -7 -30 -15 -4 -8 -17 -15 -30 -15 -14 0 -27 -7 -30 -15 -4 -8 -12 -15
-20 -15 -8 0 -14 -7 -14 -15 0 -10 -10 -15 -30 -15 -19 0 -30 -5 -30 -14 0 -8
-11 -17 -25 -20 -14 -4 -34 -14 -45 -23 -19 -17 -20 -31 -20 -385 0 -320 2
-368 15 -368 8 0 15 -7 15 -15 0 -8 7 -15 15 -15 8 0 15 -7 15 -15 0 -10 10
-15 30 -15 20 0 30 -5 30 -15 0 -10 10 -15 30 -15 20 0 30 -5 30 -15 0 -8 7
-15 15 -15 8 0 15 -7 15 -15 0 -10 10 -15 30 -15 20 0 30 -5 30 -15 0 -10 10
-15 30 -15 20 0 30 -5 30 -15 0 -10 10 -15 30 -15 20 0 30 -5 30 -15 0 -8 7
-15 15 -15 8 0 15 -7 15 -15 0 -10 10 -15 30 -15 20 0 30 -5 30 -15 0 -10 10
-15 29 -15 21 0 30 -6 35 -22 3 -13 6 -157 6 -320 0 -258 2 -298 15 -298 8 0
15 -7 15 -15 0 -8 7 -15 15 -15 8 0 15 -7 15 -15 0 -8 5 -15 11 -15 6 0 17 -7
25 -15 9 -8 24 -15 35 -15 10 0 19 -7 19 -15 0 -10 10 -15 30 -15 20 0 30 -5
30 -15 0 -10 10 -15 30 -15 20 0 30 -5 30 -15 0 -10 10 -15 30 -15 20 0 30 -5
30 -15 0 -8 7 -15 15 -15 8 0 15 -7 15 -15 0 -10 10 -15 30 -15 20 0 30 -5 30
-15 0 -10 10 -15 30 -15 20 0 30 -5 30 -15 0 -10 10 -15 30 -15 20 0 30 -5 30
-15 0 -8 7 -15 15 -15 8 0 15 -7 15 -15 0 -10 10 -15 30 -15 20 0 30 -5 30
-15 0 -11 11 -15 40 -15 29 0 40 4 40 15 0 10 10 15 30 15 20 0 30 5 30 15 0
10 10 15 30 15 20 0 30 5 30 15 0 8 7 15 15 15 8 0 15 7 15 15 0 10 10 15 30
15 20 0 30 5 30 15 0 10 10 15 30 15 20 0 30 5 30 15 0 10 10 15 30 15 20 0
30 5 30 15 0 8 7 15 15 15 8 0 15 7 15 15 0 10 10 15 30 15 20 0 30 5 30 15 0
10 10 15 30 15 20 0 30 5 30 15 0 8 9 15 19 15 11 0 26 7 35 15 8 8 19 15 25
15 6 0 11 7 11 15 0 8 7 15 15 15 8 0 15 7 15 15 0 8 7 15 15 15 13 0 15 40
15 298 0 163 3 307 6 320 5 16 14 22 35 22 19 0 29 5 29 15 0 10 10 15 30 15
20 0 30 5 30 15 0 8 7 15 15 15 8 0 15 7 15 15 0 10 10 15 30 15 20 0 30 5 30
15 0 10 10 15 30 15 20 0 30 5 30 15 0 10 10 15 30 15 20 0 30 5 30 15 0 8 7
15 15 15 8 0 15 7 15 15 0 10 10 15 30 15 20 0 30 5 30 15 0 10 10 15 30 15
20 0 30 5 30 15 0 8 7 15 15 15 8 0 15 7 15 15 0 8 7 15 15 15 13 0 15 48 15
368 0 354 -1 368 -20 385 -11 9 -31 19 -45 23 -14 3 -25 12 -25 20 0 9 -11 14
-30 14 -20 0 -30 5 -30 15 0 8 -6 15 -14 15 -8 0 -16 7 -20 15 -3 8 -16 15
-30 15 -13 0 -26 7 -30 15 -3 8 -16 15 -30 15 -13 0 -26 7 -30 15 -3 8 -17 15
-31 15 -16 0 -25 6 -25 15 0 8 -6 15 -14 15 -8 0 -16 7 -20 15 -3 8 -16 15
-30 15 -13 0 -26 7 -30 15 -3 8 -16 15 -30 15 -13 0 -26 7 -30 15 -3 8 -16 15
-30 15 -13 0 -26 7 -30 15 -3 8 -12 15 -21 15 -8 0 -15 7 -15 15 0 11 -11 15
-40 15 -29 0 -40 -4 -40 -15 0 -10 -10 -15 -30 -15 -20 0 -30 -5 -30 -15 0 -8
-7 -15 -15 -15 -8 0 -15 -7 -15 -15 0 -10 -10 -15 -30 -15 -20 0 -30 -5 -30
-15 0 -10 -10 -15 -30 -15 -20 0 -30 -5 -30 -15 0 -8 -7 -15 -15 -15 -8 0 -15
-7 -15 -15 0 -10 -10 -15 -30 -15 -20 0 -30 -5 -30 -15 0 -8 -7 -15 -15 -15
-8 0 -15 -7 -15 -15 0 -10 -10 -15 -30 -15 -20 0 -30 -5 -30 -15 0 -8 -7 -15
-15 -15 -8 0 -15 -7 -15 -15 0 -10 -10 -15 -30 -15 -20 0 -30 -5 -30 -15 0
-11 -12 -15 -50 -15 -38 0 -50 4 -50 15 0 10 -10 15 -30 15 -20 0 -30 5 -30
15 0 8 -7 15 -15 15 -8 0 -15 7 -15 15 0 10 -10 15 -30 15 -20 0 -30 5 -30 15
0 8 -7 15 -15 15 -8 0 -15 7 -15 15 0 10 -10 15 -30 15 -20 0 -30 5 -30 15 0
8 -7 15 -15 15 -8 0 -15 7 -15 15 0 10 -10 15 -30 15 -20 0 -30 5 -30 15 0 10
-10 15 -30 15 -20 0 -30 5 -30 15 0 8 -7 15 -15 15 -8 0 -15 7 -15 15 0 10
-10 15 -30 15 -20 0 -30 5 -30 15 0 11 -11 15 -40 15 -29 0 -40 -4 -40 -15z
m120 -240 c0 -8 7 -15 15 -15 8 0 15 -7 15 -15 0 -10 10 -15 30 -15 20 0 30
-5 30 -15 0 -10 10 -15 30 -15 20 0 30 -5 30 -15 0 -10 10 -15 30 -15 20 0 30
-5 30 -15 0 -8 7 -15 15 -15 8 0 15 -7 15 -15 0 -10 10 -15 30 -15 20 0 30 -5
30 -15 0 -10 10 -15 30 -15 20 0 30 -5 30 -15 0 -8 7 -15 15 -15 13 0 15 -39
15 -290 l0 -290 -29 0 c-16 0 -31 -6 -35 -15 -3 -8 -16 -15 -30 -15 -13 0 -26
-7 -30 -15 -3 -8 -16 -15 -28 -15 -13 -1 -34 -14 -48 -30 -13 -17 -34 -30 -46
-30 -12 0 -24 -7 -28 -15 -3 -8 -16 -15 -30 -15 -13 0 -26 -7 -30 -15 -3 -8
-16 -15 -30 -15 -13 0 -26 -7 -30 -15 -8 -22 -156 -22 -156 0 0 10 -10 15 -30
15 -20 0 -30 5 -30 15 0 8 -7 15 -15 15 -8 0 -15 7 -15 15 0 10 -10 15 -30 15
-20 0 -30 5 -30 15 0 10 -10 15 -30 15 -20 0 -30 5 -30 15 0 10 -10 15 -30 15
-20 0 -30 5 -30 15 0 8 -7 15 -15 15 -8 0 -15 7 -15 15 0 10 -10 15 -30 15
-28 0 -30 3 -30 35 0 24 -5 35 -15 35 -13 0 -15 33 -15 235 0 202 2 235 15
235 8 0 15 9 15 20 0 11 7 20 15 20 8 0 15 7 15 15 0 8 7 15 15 15 8 0 15 7
15 15 0 10 10 15 30 15 20 0 30 5 30 15 0 10 10 15 30 15 20 0 30 5 30 15 0
10 10 15 30 15 20 0 30 5 30 15 0 8 7 15 15 15 8 0 15 7 15 15 0 10 10 15 30
15 20 0 30 5 30 15 0 10 10 15 30 15 20 0 30 5 30 15 0 12 14 15 65 15 51 0
65 -3 65 -15z m1110 0 c0 -10 10 -15 30 -15 20 0 30 -5 30 -15 0 -10 10 -15
30 -15 20 0 30 -5 30 -15 0 -8 7 -15 15 -15 8 0 15 -7 15 -15 0 -10 10 -15 30
-15 20 0 30 -5 30 -15 0 -10 10 -15 30 -15 20 0 30 -5 30 -15 0 -10 10 -15 30
-15 20 0 30 -5 30 -15 0 -8 7 -15 15 -15 8 0 15 -7 15 -15 0 -8 7 -15 15 -15
8 0 15 -9 15 -20 0 -11 7 -20 15 -20 13 0 15 -33 15 -235 0 -202 -2 -235 -15
-235 -10 0 -15 -11 -15 -35 0 -24 -5 -35 -15 -35 -8 0 -15 -7 -15 -15 0 -10
-10 -15 -30 -15 -20 0 -30 -5 -30 -15 0 -10 -10 -15 -30 -15 -20 0 -30 -5 -30
-15 0 -10 -10 -15 -30 -15 -20 0 -30 -5 -30 -15 0 -10 -10 -15 -30 -15 -20 0
-30 -5 -30 -15 0 -8 -7 -15 -15 -15 -8 0 -15 -7 -15 -15 0 -10 -10 -15 -30
-15 -20 0 -30 -5 -30 -15 0 -22 -148 -22 -156 0 -4 8 -17 15 -30 15 -14 0 -27
7 -30 15 -4 8 -17 15 -30 15 -14 0 -27 7 -30 15 -4 8 -16 15 -28 15 -12 0 -33
13 -46 30 -14 16 -35 29 -48 30 -12 0 -25 7 -28 15 -4 8 -17 15 -30 15 -14 0
-27 7 -30 15 -4 9 -19 15 -35 15 l-29 0 0 290 c0 251 2 290 15 290 8 0 15 7
15 15 0 10 10 15 30 15 20 0 30 5 30 15 0 10 10 15 30 15 20 0 30 5 30 15 0 8
7 15 15 15 8 0 15 7 15 15 0 10 10 15 30 15 20 0 30 5 30 15 0 10 10 15 30 15
20 0 30 5 30 15 0 10 10 15 30 15 20 0 30 5 30 15 0 8 7 15 15 15 8 0 15 7 15
15 0 12 14 15 65 15 51 0 65 -3 65 -15z m-540 -960 c0 -10 10 -15 30 -15 20 0
30 -5 30 -15 0 -10 10 -15 30 -15 20 0 30 -5 30 -15 0 -8 7 -15 15 -15 8 0 15
-7 15 -15 0 -10 10 -15 30 -15 20 0 30 -5 30 -15 0 -10 10 -15 30 -15 20 0 30
-5 30 -15 0 -10 10 -15 30 -15 20 0 30 -5 30 -15 0 -8 7 -15 15 -15 8 0 15 -7
15 -15 0 -8 7 -15 15 -15 13 0 15 -37 15 -275 0 -238 -2 -275 -15 -275 -8 0
-15 -7 -15 -15 0 -10 -10 -15 -30 -15 -20 0 -30 -5 -30 -15 0 -10 -10 -15 -30
-15 -20 0 -30 -5 -30 -15 0 -10 -10 -15 -30 -15 -20 0 -30 -5 -30 -15 0 -10
-10 -15 -30 -15 -20 0 -30 -5 -30 -15 0 -8 -7 -15 -15 -15 -8 0 -15 -7 -15
-15 0 -10 -10 -15 -30 -15 -20 0 -30 -5 -30 -15 0 -10 -10 -15 -30 -15 -20 0
-30 -5 -30 -15 0 -11 -12 -15 -50 -15 -38 0 -50 4 -50 15 0 10 -10 15 -30 15
-20 0 -30 5 -30 15 0 10 -10 15 -30 15 -20 0 -30 5 -30 15 0 8 -7 15 -15 15
-8 0 -15 7 -15 15 0 10 -10 15 -30 15 -20 0 -30 5 -30 15 0 10 -10 15 -30 15
-20 0 -30 5 -30 15 0 10 -10 15 -30 15 -20 0 -30 5 -30 15 0 10 -10 15 -30 15
-20 0 -30 5 -30 15 0 8 -7 15 -15 15 -13 0 -15 37 -15 275 0 238 2 275 15 275
8 0 15 7 15 15 0 8 7 15 15 15 8 0 15 7 15 15 0 10 10 15 30 15 20 0 30 5 30
15 0 10 10 15 30 15 20 0 30 5 30 15 0 10 10 15 30 15 20 0 30 5 30 15 0 8 7
15 15 15 8 0 15 7 15 15 0 10 10 15 30 15 20 0 30 5 30 15 0 10 10 15 30 15
20 0 30 5 30 15 0 12 16 15 80 15 64 0 80 -3 80 -15z"/>
</g>
</svg>

标签： javascripthtmlcsssvg

Answer 1

试试我在 Inkscape 中做的这个重塑的 svg。由于像素化的事实，将位图图像转换为 svg 并不是一个好主意。因此，您的 svg 看起来非常像素化。Inkscape 是一个原生 svg 编辑器，您可以使用它来导入位图图标并通过绘制它来重塑它。

现在，关于动画，试试这个，你会得到你想要的。请注意，我创建了一个单路径封闭路径。

<svg viewBox="0 0 256 256">
  <path class="path" d="m 15.625507,46.199537 55.767886,-32.030352 55.623047,32.281229 -0.14485,64.311586 0.14485,-64.311586 55.76788,-32.030352 55.62305,32.281229 -0.14485,64.311579 -55.76788,32.03036 -55.62305,-32.28123 55.62305,32.28123 -0.14485,64.31158 -55.76788,32.03035 L 70.958866,207.10393 71.103708,142.79235 126.87159,110.762 71.103708,142.79235 15.480664,110.51112 Z" style="fill:#fff;stroke:#000;stroke-width:13;stroke-linejoin:round;stroke-linecap:round" />
</svg>

.path {
    stroke-linejoin:round;
    stroke-linecap:round;
    stroke-dasharray: 1500;
    stroke-dashoffset: 1500;
    animation: dash 5s linear alternate infinite;
    }

    @keyframes dash {
    from {
        stroke-dashoffset: 1500;
    }
    to {
        stroke-dashoffset: 0;
    }
    }

<!DOCTYPE html>
    <html lang="en" >
    <head>
    <meta charset="UTF-8">
    <title>CodePen - Basic Example of SVG Line Drawing, Backward and Forward</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
    <link rel="stylesheet" href="./style.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

    </head>
    <body>

    <svg viewBox="0 0 256 256">
    <path class="path" fill="#fff" stroke="#000000" stroke-width="13" d="m 15.625507,46.199537 55.767886,-32.030352 55.623047,32.281229 -0.14485,64.311586 0.14485,-64.311586 55.76788,-32.030352 55.62305,32.281229 -0.14485,64.311579 -55.76788,32.03036 -55.62305,-32.28123 55.62305,32.28123 -0.14485,64.31158 -55.76788,32.03035 L 70.958866,207.10393 71.103708,142.79235 126.87159,110.762 71.103708,142.79235 15.480664,110.51112 Z"/>
    </svg>

    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
    </body>
    </html>