由于某种原因，SVG动画有黑色填充

Question

因此，无论出于何种原因，我的Origami SVG的某些图层都会出现黑色填充。结果如下：http://imgur.com/rO0piwa

以下是代码：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 viewBox="0 0 643.5 603" style="enable-background:new 0 0 643.5 603;" xml:space="preserve">

<defs>
<style type="text/css">
.st0{fill:none;stroke:#000000;stroke-miterlimit:10;}


.st0 {
stroke-dasharray:700;
stroke-dashoffset:0;
-webkit-animation: dash 3s linear forwards;
-o-animation: dash 3s linear forwards;
-moz-animation: dash 3s linear forwards;
animation: dash 3s linear forwards;

}
.st1 {
stroke-dasharray:700;
stroke-dashoffset:0;
-webkit-animation: dash 3s linear forwards;
-o-animation: dash 3s linear forwards;
-moz-animation: dash 3s linear forwards;
animation: dash 3s linear forwards;

}
.st2 {
stroke-dasharray:700;
stroke-dashoffset:0;
-webkit-animation: dash 3s linear forwards;
-o-animation: dash 3s linear forwards;
-moz-animation: dash 3s linear forwards;
animation: dash 3s linear forwards;

}
.st3 {
stroke-dasharray:700;
stroke-dashoffset:0;
-webkit-animation: dash 3s linear forwards;
-o-animation: dash 3s linear forwards;
-moz-animation: dash 3s linear forwards;
animation: dash 3s linear forwards;

}
.st4 {
stroke-dasharray:700;
stroke-dashoffset:0;
-webkit-animation: dash 3s linear forwards;
-o-animation: dash 3s linear forwards;
-moz-animation: dash 3s linear forwards;
animation: dash 3s linear forwards;

}

.st5 {
stroke-dasharray:700;
stroke-dashoffset:0;
-webkit-animation: dash 3s linear forwards;
-o-animation: dash 3s linear forwards;
-moz-animation: dash 3s linear forwards;
animation: dash 3s linear forwards;

}
.st6 {
stroke-dasharray:700;
stroke-dashoffset:0;
-webkit-animation: dash 3s linear forwards;
-o-animation: dash 3s linear forwards;
-moz-animation: dash 3s linear forwards;
animation: dash 3s linear forwards;

}

@-webkit-keyframes dash {
from {
stroke-dashoffset:700;
}
to {
stroke-dashoffset:0;
}

}


</style>
</defs>



<g id="Layer_1">
<polygon class="st0" points="637.3,101.7 351.2,55 472.4,165.2   "/>
<polygon class="st0" points="351.2,55 352.7,316.3 92.9,188.5    "/>
<polygon class="st0" points="176.7,145.4 113.3,88.6 92.9,188.5  "/>
<polygon class="st0" points="113.3,88.6 52.7,86.4 92.9,188.5    "/>
<polygon class="st0" points="52.7,86.4 69.3,128.6 8.2,119.9     "/>
</g>

<g id="Layer_2">
<polygon class="st1" points="352.3,316.3 529,490.7 434.4,592.9  "/>
</g>

<g id="Layer_3">
<path class="st2" d="M352.7,316.3c0,2.2,60,203.4,60,203.4L143,306.3L352.7,316.3z"/>
</g>

<g id="Layer_4">
<polygon class="st3" points="472.4,165.2 352.7,316.3 351.2,55   "/>
</g>

<g id="Layer_5">
<polygon class="st4" points="321.9,70.2 263.7,11.2 159,129.5 176.7,145.4    "/>
<polygon class="st4" points="263.7,11.2 177.9,25.7 229.4,50.1   "/>
</g>

<g id="Layer_6">
<polygon class="st5" points="352.7,316.3 92.9,188.5 142.5,306   "/>
</g>

<g id="Layer_7">
<polygon class="st6" points="544.6,427.2 512.3,474.1 392.4,355.8    "/>
</g>

</svg>

第1层中的所有内容都可以正常呈现，但其他图层都有黑色填充，如您所见。任何帮助都会非常感激！

Answer 1

black是默认填充，你没有在CSS中为st1，st2等指定任何其他颜色。