svgラインアニメーションが機能しない

私は新鮮な目のペアが必要です。アクション：Illustratorの両方でsvgを作成し、行がアニメートしないときにInkscapeに切り替えました。まだ動かない。私の現在のsvgといくつかの他のものを試してみました。 [enter code here]svgラインアニメーションが機能しない

<?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/

出典

2016-12-12 Zach Robinson

間違ったいくつかのものがここにあります。

最初に間違っていたのは、インラインstyleのアトリビュートがCSSルールよりも優先されるということでした。したがって、style="...stroke-dasharray:none.."は、ラインアニメーションが機能しないようにしていました。

これを修正すると、stroke-widthの値が0.1になると、小さすぎて表示できなくなります。あなたはこれらの二つのことを修正したら

、あなたはこれを取得：見ることは簡単ですので、私は赤いストロークを作った

。

\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>

出典

2016-12-12 07:23:25

、ポール、ありがとうございました。私は、第2の自動生成されたインラインの 'スタイル'属性が下部に重複していることに気付かなかった。 –

svgラインアニメーションが機能しない

答えて

関連する問題