Svg Linie Animation funktioniert nicht

Question

Ich brauche ein Paar frische Augen. Aktionen: Sowohl in Illustrator als auch in Inkscape wurde svg erstellt, wenn die Linie nicht animiert wurde. Funktioniert immer noch nicht. Habe mit meiner jetzigen Svg und ein paar anderen versucht, darunter eine Grundlinie ohne Erfolg. [enter code here]

<?xml version="1.0" encoding="UTF-8" standalone="no"?> 
 
<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> 
 

 
<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" 
 
    version="1.1" 
 
    id="Layer_1" 
 
    x="0px" 
 
    y="0px" 
 
    viewBox="0 0 1280 372.7" 
 
    style="enable-background:new 0 0 1280 372.7;" 
 
    xml:space="preserve" 
 
    inkscape:version="0.91 r13725" 
 
    sodipodi:docname="ZRlogoinkscape.svg"><metadata 
 
    id="metadata3348"><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><sodipodi:namedview 
 
    pagecolor="#ffffff" 
 
    bordercolor="#666666" 
 
    borderopacity="1" 
 
    objecttolerance="10" 
 
    gridtolerance="10" 
 
    guidetolerance="10" 
 
    inkscape:pageopacity="0" 
 
    inkscape:pageshadow="2" 
 
    inkscape:window-width="1366" 
 
    inkscape:window-height="706" 
 
    id="namedview3346" 
 
    showgrid="false" 
 
    inkscape:zoom="0.9421875" 
 
    inkscape:cx="478.14262" 
 
    inkscape:cy="186.35001" 
 
    inkscape:window-x="-8" 
 
    inkscape:window-y="-8" 
 
    inkscape:window-maximized="1" 
 
    inkscape:current-layer="Layer_1" /> 
 

 
\t <defs 
 
    id="defs3337"> 
 
\t \t <style 
 
    id="style3339" type="text/css"> 
 
\t \t \t .path { 
 

 
\t \t \t stroke-dasharray: 800; 
 
\t \t \t stroke-dashoffset: 0; 
 
\t \t \t -webkit-animation: dash 5s linear forwards; 
 
\t \t \t -moz-animation: dash 5s linear forwards; 
 
\t \t \t -o-animation: dash 5s linear forwards; 
 
\t \t \t animation: dash 5s linear forwards; 
 
\t \t \t } 
 
\t \t \t @-webkit-keyframes dash { \t 
 

 
\t \t \t from { 
 
\t \t \t stroke-dashoffset: 800; 
 
\t \t \t } 
 
\t \t \t to { 
 
\t \t \t stroke-dashoffset:0; 
 
\t \t \t } 
 
\t \t \t } 
 

 
\t \t </style> 
 
\t <!--var path = document.querySelector('.path'); 
 
var length = path.getTotalLength();--> 
 
\t </defs> 
 
<g 
 
    id="g3341" 
 
    style="stroke:#000000;fill:#000000;fill-opacity:1;stroke-width:0.1;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"> 
 
\t <path 
 
    class="path" 
 
    d="M-2.2,175.5c102.3,6.1,204.8,8.6,307.3,7.3c25.3-0.3,50.6-0.9,75.9-1.6c20.9-0.6,45.5,1.5,63.7-10.6 c12.7-8.5,22.4-21.1,29.9-34.1c10.5-18,18.2-38.4,36.6-49.9c9.9-6.2,21.2-10.3,32.8-11.8C555,73.2,569,73,573.5,85.3 c3.8,10.5,0.3,23.4-3.1,33.5c-4.4,12.9-11.4,25.2-21.2,34.8c-0.4,0.4-3.7,4.4-3.2,4.3c31.6-6.6,63.5,9.1,82.8,33.9 c21.4,27.4,23.9,63.8,12.6,96c-12.5,35.5-43,70.9-82.9,73.5c-15.3,1-31.7-4.2-42.5-15.3c-12.9-13.3-14.4-32.4-9.6-49.5 c5.2-18.7,16.2-35.1,27.8-50.5c11.9-15.7,24.8-30.5,38.3-44.8c26.5-27.9,54.9-53.8,82.2-80.9c13.3-13.2,26.7-26.6,38.8-41 c10-11.8,19.5-25.7,19.2-41.8c-0.3-14.5-9.4-29-25.2-28.7C677,8.8,666.1,17,661.7,26.4c-7.2,15.2,9,29.3,22.5,32.6 c18.6,4.6,39.9-2.7,56.9,8.4c6.3,4.1,12.3,10.8,12.8,18.7c0.8,11.8-11.1,17.8-20.1,22.6c-16.1,8.5-34.4,13.1-52.7,13.3 c-8.9,0.1-17.6-1-26.3-2.9c-1.2,1.4-2.3,2.9-3.5,4.3c5.6-5.7,16.7-5.3,23.7-3.8c7.8,1.7,15.3,5.3,21.7,10 c13.9,10.3,23,25.9,36,37.2c15.4,13.3,33.9,15.4,53.5,14.3c22.2-1.2,44.3-3.1,66.4-4.9c89.5-7.1,179.2-15.5,269.1-14.6 c50.5,0.5,101,4,150.8,12c2.7,0.4,6.5-8,7.8-7.8c-92.3-14.9-186-13.9-279.1-8.1c-46.6,2.9-93.1,6.9-139.6,10.6 c-22.9,1.8-45.8,3.9-68.8,5.1c-20.5,1-39-2-54.5-16.3c-14.6-13.5-24.8-31.8-43.1-40.9c-7.7-3.8-16.6-6.2-25.2-5 c-8,1.1-14.1,5.7-19.6,11.3c-0.2,0.2-3.7,4.3-3.5,4.3c34.6,7.8,73.1-0.8,100.1-24.3c5.1-4.4,10.7-9.7,13.3-16.1 c3-7.6,0.2-15.5-5.1-21.3c-14.5-15.9-36.5-10.7-55.6-12.7c-9-0.9-17.5-3.8-24.2-10.2c-2.8-2.7-5.2-5.9-6.6-9.5 c-2-5.2-0.7-9,0.7-14c0.7-2.6,0,0.4-1.1,0.8c0.9-0.3,1.8-1,2.7-1.4c1.6-0.7,3.3-1.1,5-1.4c3.9-0.7,7.9-0.4,11.6,0.9 c7.4,2.5,12.7,9,15.2,16.3c6.9,20.1-5.5,38.9-18.4,53.4c-13.8,15.4-28.5,30-43.4,44.5c-28.3,27.5-57.2,54.4-83.7,83.7 c-13,14.3-25.3,29.2-36.5,44.9c-10.8,15.1-20.6,31.8-24,50.2c-3.1,16.9,0.9,34.6,14.4,46.1c12.4,10.5,29.5,14.1,45.3,11.7 c33.6-5.2,63.2-34.5,80.2-62.5c17.7-29.2,25.5-66.6,12.6-99.2c-11.9-30.3-41.3-54.6-74.1-57.8c-7.5-0.7-14.9-0.2-22.3,1.3 c-1.1,1.4-2.1,2.9-3.2,4.3c14.4-14.1,25.5-31.1,30.4-50.8c2.1-8.6,4.1-19.2,0.2-27.6c-4.7-10.1-16.4-10.2-26-9.3 c-19.2,1.8-36.8,10.5-50.9,23.5c-13.4,12.2-22.2,27-30.7,42.8c-4.8,8.8-9.5,18.2-16.2,25.7c-8.2,9.1-21.3,12.2-32.9,13.3 c-26.2,2.6-53,2.1-79.3,2.6c-53.1,1.1-106.3,1.1-159.4,0.2c-59.9-1.1-119.7-3.4-179.5-7c-1.3-0.1-3.5,2.6-4.3,3.5 C0.9,171.6-2.1,175.5-2.2,175.5L-2.2,175.5z" 
 
    style="stroke:#000000;fill:#000000;fill-opacity:1;stroke-width:0.1;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" /> 
 
\t 
 
</g> 
 
</svg>

JSFiddle: https://jsfiddle.net/senorzacharias/f2qmu66L/

Answer 1

Es gibt hier falsch mehrere Dinge.

Die primäre Sache, die falsch war, war die Tatsache, dass die inline style Attribute Vorrang vor den CSS-Regeln haben. So hat die style="...stroke-dasharray:none.." verhindert, dass die Linienanimation funktioniert.

Sobald Sie das beheben, bedeutet der stroke-width Wert von 0,1, dass es zu klein ist, um sichtbar zu sein.

Sobald Sie diese beiden Dinge zu beheben, Sie diese:

ich den Schlaganfall rot gemacht haben, so dass es leichter zu sehen ist.

\t 
 
.path { 
 
    stroke: red; 
 
    stroke-width: 4; 
 
\t stroke-dasharray: 800; 
 
\t stroke-dashoffset: 0; 
 
\t -webkit-animation: dash 5s linear forwards; 
 
\t -moz-animation: dash 5s linear forwards; 
 
\t -o-animation: dash 5s linear forwards; 
 
\t animation: dash 5s linear forwards; 
 
} 
 

 
@-webkit-keyframes dash { \t 
 
\t from { 
 
    \t \t stroke-dashoffset: 800; 
 
\t } 
 
\t to { 
 
\t \t stroke-dashoffset:0; 
 
\t } 
 
} 
 

 
\t \t

<?xml version="1.0" encoding="UTF-8" standalone="no"?> 
 
<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> 
 

 
<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" 
 
    version="1.1" 
 
    id="Layer_1" 
 
    x="0px" 
 
    y="0px" 
 
    viewBox="0 0 1280 372.7" 
 
    style="enable-background:new 0 0 1280 372.7;" 
 
    xml:space="preserve" 
 
    inkscape:version="0.91 r13725" 
 
    sodipodi:docname="ZRlogoinkscape.svg"><metadata 
 
    id="metadata3348"><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><sodipodi:namedview 
 
    pagecolor="#ffffff" 
 
    bordercolor="#666666" 
 
    borderopacity="1" 
 
    objecttolerance="10" 
 
    gridtolerance="10" 
 
    guidetolerance="10" 
 
    inkscape:pageopacity="0" 
 
    inkscape:pageshadow="2" 
 
    inkscape:window-width="1366" 
 
    inkscape:window-height="706" 
 
    id="namedview3346" 
 
    showgrid="false" 
 
    inkscape:zoom="0.9421875" 
 
    inkscape:cx="478.14262" 
 
    inkscape:cy="186.35001" 
 
    inkscape:window-x="-8" 
 
    inkscape:window-y="-8" 
 
    inkscape:window-maximized="1" 
 
    inkscape:current-layer="Layer_1" /> 
 

 
\t 
 
<g 
 
    id="g3341" 
 
    style="stroke:#000000;fill:#000000;fill-opacity:1;stroke-width:0.1;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"> 
 
\t <path 
 
    class="path" 
 
    d="M-2.2,175.5c102.3,6.1,204.8,8.6,307.3,7.3c25.3-0.3,50.6-0.9,75.9-1.6c20.9-0.6,45.5,1.5,63.7-10.6 c12.7-8.5,22.4-21.1,29.9-34.1c10.5-18,18.2-38.4,36.6-49.9c9.9-6.2,21.2-10.3,32.8-11.8C555,73.2,569,73,573.5,85.3 c3.8,10.5,0.3,23.4-3.1,33.5c-4.4,12.9-11.4,25.2-21.2,34.8c-0.4,0.4-3.7,4.4-3.2,4.3c31.6-6.6,63.5,9.1,82.8,33.9 c21.4,27.4,23.9,63.8,12.6,96c-12.5,35.5-43,70.9-82.9,73.5c-15.3,1-31.7-4.2-42.5-15.3c-12.9-13.3-14.4-32.4-9.6-49.5 c5.2-18.7,16.2-35.1,27.8-50.5c11.9-15.7,24.8-30.5,38.3-44.8c26.5-27.9,54.9-53.8,82.2-80.9c13.3-13.2,26.7-26.6,38.8-41 c10-11.8,19.5-25.7,19.2-41.8c-0.3-14.5-9.4-29-25.2-28.7C677,8.8,666.1,17,661.7,26.4c-7.2,15.2,9,29.3,22.5,32.6 c18.6,4.6,39.9-2.7,56.9,8.4c6.3,4.1,12.3,10.8,12.8,18.7c0.8,11.8-11.1,17.8-20.1,22.6c-16.1,8.5-34.4,13.1-52.7,13.3 c-8.9,0.1-17.6-1-26.3-2.9c-1.2,1.4-2.3,2.9-3.5,4.3c5.6-5.7,16.7-5.3,23.7-3.8c7.8,1.7,15.3,5.3,21.7,10 c13.9,10.3,23,25.9,36,37.2c15.4,13.3,33.9,15.4,53.5,14.3c22.2-1.2,44.3-3.1,66.4-4.9c89.5-7.1,179.2-15.5,269.1-14.6 c50.5,0.5,101,4,150.8,12c2.7,0.4,6.5-8,7.8-7.8c-92.3-14.9-186-13.9-279.1-8.1c-46.6,2.9-93.1,6.9-139.6,10.6 c-22.9,1.8-45.8,3.9-68.8,5.1c-20.5,1-39-2-54.5-16.3c-14.6-13.5-24.8-31.8-43.1-40.9c-7.7-3.8-16.6-6.2-25.2-5 c-8,1.1-14.1,5.7-19.6,11.3c-0.2,0.2-3.7,4.3-3.5,4.3c34.6,7.8,73.1-0.8,100.1-24.3c5.1-4.4,10.7-9.7,13.3-16.1 c3-7.6,0.2-15.5-5.1-21.3c-14.5-15.9-36.5-10.7-55.6-12.7c-9-0.9-17.5-3.8-24.2-10.2c-2.8-2.7-5.2-5.9-6.6-9.5 c-2-5.2-0.7-9,0.7-14c0.7-2.6,0,0.4-1.1,0.8c0.9-0.3,1.8-1,2.7-1.4c1.6-0.7,3.3-1.1,5-1.4c3.9-0.7,7.9-0.4,11.6,0.9 c7.4,2.5,12.7,9,15.2,16.3c6.9,20.1-5.5,38.9-18.4,53.4c-13.8,15.4-28.5,30-43.4,44.5c-28.3,27.5-57.2,54.4-83.7,83.7 c-13,14.3-25.3,29.2-36.5,44.9c-10.8,15.1-20.6,31.8-24,50.2c-3.1,16.9,0.9,34.6,14.4,46.1c12.4,10.5,29.5,14.1,45.3,11.7 c33.6-5.2,63.2-34.5,80.2-62.5c17.7-29.2,25.5-66.6,12.6-99.2c-11.9-30.3-41.3-54.6-74.1-57.8c-7.5-0.7-14.9-0.2-22.3,1.3 c-1.1,1.4-2.1,2.9-3.2,4.3c14.4-14.1,25.5-31.1,30.4-50.8c2.1-8.6,4.1-19.2,0.2-27.6c-4.7-10.1-16.4-10.2-26-9.3 c-19.2,1.8-36.8,10.5-50.9,23.5c-13.4,12.2-22.2,27-30.7,42.8c-4.8,8.8-9.5,18.2-16.2,25.7c-8.2,9.1-21.3,12.2-32.9,13.3 c-26.2,2.6-53,2.1-79.3,2.6c-53.1,1.1-106.3,1.1-159.4,0.2c-59.9-1.1-119.7-3.4-179.5-7c-1.3-0.1-3.5,2.6-4.3,3.5 C0.9,171.6-2.1,175.5-2.2,175.5L-2.2,175.5z" /> 
 
\t 
 
</g> 
 
</svg>