html - 我在为 svg 图片制作动画时遇到问题

Question

我创建了 2 张 svg 图片并希望为它们制作动画。其中一张图片按照我的意愿处理动画，但另一张是制作 2 行而不是用颜色填充的。我想知道它是 svg 文件的问题还是我的代码有误。这是第一个的代码

#svg_1 {
    stroke-dasharray: 1400;
    stroke-dashoffset: 1400;
    animation: two 5s ease-in forwards;
}

#svg_2 {
    stroke-dasharray: 1400;
    stroke-dashoffset: 1400;
    animation: two 5s ease-in forwards;
}

#svg_4 {
    stroke-dasharray: 1400;
    stroke-dashoffset: 1400;
    animation: two 5s ease-in forwards;
}


#svg_5 {
    stroke-dasharray: 1400;
    stroke-dashoffset: 1400;
    animation: two 5s ease-in forwards;
}



@keyframes two {
    0% {
        stroke-dashoffset: 1400;
    }

    100% {
        stroke-dashoffset: 0;
    }
}

<svg width="800" height="600" xmlns="http://www.w3.org/2000/svg">                
                <g>
                    <title>background</title>
                    <rect fill="none" id="canvas_background" height="602" width="802" y="-1" x="-1" />
                    <g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid">
                        <rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%" width="100%" />
                    </g>
                </g>
                <g>
                    <title>Layer 1</title>
                    <rect id="svg_1" height="446" width="252" y="104.45313" x="122.5" stroke-width="14" stroke="#000" fill="none" />
                    <line stroke-linecap="undefined" stroke-linejoin="undefined" id="svg_2" y2="467.45313" x2="378.5" y1="465.45313" x1="120.5" stroke-width="14" stroke="#000" fill="none" />
                    <ellipse ry="23" rx="45" id="svg_3" cy="507.45313" cx="249.5" stroke-width="14" stroke="#000" fill="none" />
                    <line stroke-linecap="undefined" stroke-linejoin="undefined" id="svg_4" y2="164.45313" x2="375.5" y1="162.45313" x1="123.5" stroke-width="14" stroke="#000" fill="none" />
                    <rect id="svg_5" height="24" width="131" y="120.45313" x="185.5" stroke-width="14" stroke="#000" fill="none" />
                </g>
            </svg>

这是另一个无法正常工作的代码

@keyframes help {
    0% {
        stroke-dashoffset: 1000;
    }

    100% {
        stroke-dashoffset: 0;
    }
}

#layer1 {
    fill: none;
    stroke: #000000;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: help 5s ease-in forwards;
}

<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
            <svg xmlns:dc="http://purl.org/dc/elements/1.1/"
                 xmlns:cc="http://creativecommons.org/ns#"
                 xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
                 xmlns:svg="http://www.w3.org/2000/svg"
                 xmlns="http://www.w3.org/2000/svg"
                 xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
                 xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
                 sodipodi:docname="cobysiemusialostac.svg"
                 inkscape:version="1.0 (4035a4fb49, 2020-05-01)"
                 id="svg8"
                 version="1.1"
                 viewBox="0 0 210 297"
                 height="297mm"
                 width="210mm">
                <defs id="defs2" />
                <sodipodi:namedview inkscape:window-maximized="0"
                                    inkscape:window-y="0"
                                    inkscape:window-x="52"
                                    inkscape:window-height="1040"
                                    inkscape:window-width="1465"
                                    showgrid="false"
                                    inkscape:document-rotation="0"
                                    inkscape:current-layer="layer1"
                                    inkscape:document-units="mm"
                                    inkscape:cy="560"
                                    inkscape:cx="400"
                                    inkscape:zoom="0.35"
                                    inkscape:pageshadow="2"
                                    inkscape:pageopacity="0.0"
                                    borderopacity="1.0"
                                    bordercolor="#666666"
                                    pagecolor="#ffffff"
                                    id="base" />
                <metadata id="metadata5">
                    <rdf:RDF>
                        <cc:Work rdf:about="">
                            <dc:format>image/svg+xml</dc:format>
                            <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
                            <dc:title></dc:title>
                        </cc:Work>
                    </rdf:RDF>
                </metadata>
                <g id="layer1"
                   inkscape:groupmode="layer"
                   inkscape:label="Warstwa 1">
                    <path id="path32"
                          d="m 32.49157,256.7856 c -2.12058,-1.09824 -4.13468,-3.83205 -4.56547,-6.1969 l -0.29143,-1.59978 17.3698,-100.48131 17.36981,-100.481298 0.81955,-1.42243 c 1.23874,-2.149973 4.01205,-3.995888 6.48242,-4.314701 1.84853,-0.238561 1.91572,-0.227646 53.28698,8.655523 l 51.43612,8.894385 1.67753,0.853823 c 1.41676,0.72109 1.88351,1.146169 3.00245,2.734393 0.9624,1.366022 1.40761,2.319178 1.62715,3.483589 l 0.30224,1.603018 -17.37078,100.481118 -17.37079,100.48112 -0.82938,1.41938 c -0.6048,1.03504 -1.33829,1.77855 -2.70885,2.74584 -1.5873,1.12026 -2.16969,1.36392 -3.74632,1.56739 l -1.86685,0.24092 -51.52623,-8.92505 c -50.94694,-8.8247 -51.5439,-8.93419 -53.09795,-9.73903 z m 106.28907,17.15439 c 1.90635,-0.2709 4.32979,-1.82085 5.46454,-3.49493 l 0.85857,-1.26662 2.38314,-13.30452 2.38315,-13.30452 -37.72332,-6.70182 c -20.74782,-3.68601 -46.9691,-8.30066 -58.2695,-10.25479 l -20.54619,-3.55297 -2.2529,13.50581 -2.25289,13.50582 0.38337,1.48137 c 0.49403,1.90892 2.35773,4.35349 3.92603,5.14966 0.98825,0.5017 8.60478,1.87738 52.67843,9.51464 47.74692,8.27379 51.629,8.91308 52.96757,8.72287 z M 83.23549,262.49356 c -4.60477,-1.9963 -8.08616,-6.90268 -8.35566,-11.77576 -0.0862,-1.55895 0.51986,-5.06387 1.12457,-6.50335 0.89886,-2.13969 2.58919,-4.17999 4.69776,-5.67037 6.44946,-4.5586 14.85552,-3.09489 19.33424,3.36658 2.20954,3.18772 2.90046,6.34735 2.22911,10.19379 -0.69439,3.97836 -2.35547,6.63988 -5.52486,8.85241 -4.15139,2.89806 -9.07316,3.45808 -13.50516,1.53669 z m 6.35597,-0.22702 c 9.99704,-0.83748 15.09385,-12.16137 9.0628,-20.13538 -6.5518,-8.66253 -20.37167,-5.24025 -22.22972,5.50485 -1.39222,8.05117 5.13454,15.30343 13.16692,14.63053 z M 164.03369,160.48319 177.98687,79.792162 119.71726,69.716122 61.44764,59.640083 47.51722,140.19955 33.5868,220.75902 l 27.29811,4.79003 c 15.01397,2.63452 41.22506,7.22794 58.24687,10.2076 l 30.94874,5.41757 z M 179.0283,73.460882 c 0.90221,-6.027029 0.78101,-7.01602 -1.16823,-9.532242 -2.09392,-2.702984 2.84042,-1.657401 -55.12226,-11.680365 C 64.77514,42.22531 69.77406,42.897398 66.89407,44.740288 c -2.681,1.715557 -3.12728,2.606418 -4.30134,8.586438 l -0.98147,4.999099 58.33141,10.086726 58.33141,10.086727 z M 97.87737,58.904587 c -0.1671,-0.236967 -0.0975,-1.299734 0.19658,-3.000169 0.29404,-1.700436 0.58533,-2.724874 0.8223,-2.891971 0.53198,-0.37513 48.01341,7.835406 48.38854,8.367396 0.1671,0.236968 0.0975,1.299734 -0.19658,3.00017 -0.29404,1.700435 -0.58533,2.724874 -0.82229,2.89197 -0.53199,0.37513 -48.01342,-7.835406 -48.38855,-8.367396 z m 48.16798,5.295094 0.33813,-1.955356 -23.46428,-4.057466 -23.46427,-4.057466 -0.33812,1.955357 -0.33812,1.955356 23.46427,4.057465 23.46427,4.057466 z" />
                </g>
            </svg>

标签： htmlcsssvg