Question

我有这个svg，我一直试图制作两周的动画......

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns="http://www.w3.org/2000/svg"
   id="svg1"
   version="1.1"
   viewBox="49.595489 30.040314 84.135223 84.305336"
   height="84.305336mm"
   width="84.135223mm">


    <defs>
        <style>
            .logo{
                stroke-dasharray: 800;
                stroke-dashoffset: 0;
                -webkit-animation: dash 2s linear forwards;         
            }

            @-webkit-keyframes dash {
                from {
                    stroke-dashoffset: 800;
                }
                to {
                    stroke-dashoffset: 0;
                }
            }
        </style>
    </defs>

  <path class="logo"
     id="logo"
     d="m 70.303571,78.340773 c -4.032971,0.006 -8.033187,1.698025 -10.862132,4.572387 -2.828946,2.874362 -4.455685,6.891674 -4.445904,10.924637 0.0095,3.927963 1.572604,7.841853 4.315065,10.653953 2.74246,2.8121 6.641232,4.47709 10.569138,4.45364 4.633366,-0.0277 9.108311,-2.43049 12.384652,-5.70683 3.574526,-3.57453 6.411017,-6.242046 9.347584,-9.825986 0,0 7.17598,-6.918764 10.743336,-10.51178 3.56737,-3.593016 7.41006,-7.169152 11.08478,-10.843875 3.34645,-3.346446 6.32139,-6.581106 9.51049,-9.812482 3.3753,-3.420038 5.15813,-7.12199 5.18334,-11.661986 0.0216,-3.889398 -1.60848,-8.155743 -4.38434,-10.880165 -2.77587,-2.724421 -6.6563,-4.279784 -10.54572,-4.261811 -3.8759,0.01791 -7.72562,1.595418 -10.48769,4.314587 -2.762056,2.71917 -5.002206,6.149863 -4.776456,11.428746 -0.0484,4.514439 2.874106,9.098792 5.148056,11.372746 3.19237,3.192372 6.9848,6.227335 10.17717,9.419709 3.20164,3.201638 6.0452,5.990107 9.58187,9.526778 1.80732,1.807321 3.93629,5.149881 4.68721,7.593023 0.75092,2.443141 1.01197,5.054051 0.5999,7.576553 -0.55185,3.378163 -2.33545,6.072793 -4.93781,8.296363 -2.60235,2.22358 -5.80201,3.69214 -9.22483,3.7206 -4.69281,0.039 -9.04011,-1.51725 -12.0905,-4.81311 -3.187696,-3.44421 -7.211206,-7.037566 -10.268806,-10.463896 -3.057595,-3.42633 -6.28628,-6.607684 -9.408672,-9.762441 -3.174881,-3.207791 -7.386446,-5.316042 -11.899731,-5.30936 z"

     style="fill:none;fill-opacity:1;stroke:#febc00;stroke-width:10.80000019;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />

</svg>

我按照this video中的说明操作。甚至尝试添加额外的style行，就像他在视频中通过从style内复制粘贴path一样。我不确定这些属性在哪里有所不同。

<style type = "txt/css">
        .logo{fill:none;fill-opacity:1;stroke:#febc00;stroke-width:10.80000019;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1}

但它不起作用:(如果我离开上面的行并从style删除path，所有属性都会丢失，所以我猜它不会像他那样引用它们在视频中。我不确定这次出了什么问题。

html源代码只是

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8"/>
        <meta http-equip="X-UA-Compatible" content="IE=edge, chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

              <title> SVG Line Animation Demo</title>
    </head>

    <body>
        <div style = "text-align: center; padding: 150px 0;">
            <object>
                <embed src="path.svg">
            </object>
        </div>
    </body>
</html>

Answer 1

stroke-dasharray：你在路径上设置的没有覆盖并阻止动画。删除它修复了它。

我还删除了webkit位，因此它现在可以在更多浏览器上运行。

＆＃13;

{{1}}

＆＃13;

为什么我的svg动画不起作用？

1 个答案: