Question

我需要一双新鲜的眼睛。操作：在两个Illustrator中创建svg，并在行无法动画时切换到Inkscape。还是行不通。尝试过我现在的svg和其他几个人，包括基本的一行无济于事。[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" />

	 <defs
   id="defs3337">
	 	<style
   id="style3339" type="text/css">
	 		.path {

	 		stroke-dasharray: 800;
	 		stroke-dashoffset: 0;
	 		-webkit-animation: dash 5s linear forwards;
	 		-moz-animation: dash 5s linear forwards;
	 		-o-animation: dash 5s linear forwards;
	 		animation: dash 5s linear forwards;
	 		}
	 		@-webkit-keyframes dash {	

	 		from {
	 		stroke-dashoffset: 800;
	 		}
	 		to {
	 		stroke-dashoffset:0;
	 		}
	 		}

	 	</style>
	<!--var path = document.querySelector('.path');
var length = path.getTotalLength();-->
	 </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">
	<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" />
	
</g>
</svg>

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

Answer 1

这里有几个问题。

错误的主要原因是内联style属性优先于CSS规则。所以style="...stroke-dasharray:none.."阻止了线条动画的运作。

修正后，stroke-width值为0.1意味着它太小而无法显示。

一旦你解决了这两件事，你就明白了：

我让笔画变红了，所以更容易看到。

＆＃13;

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

＆＃13;

<?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" />

	 
<g
   id="g3341"
   style="stroke:#000000;fill:#000000;fill-opacity:1;stroke-width:0.1;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1">
	<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" />
	
</g>
</svg>

＆＃13;

svg线动画无效

1 个答案: