ここに SVG アニメーションがあります: http://jsfiddle.net/LANjy/3次のコードを使用します。
<svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Animating pen strokes in svg</title>
<style>
.tekst {
fill:none;
stroke:red;
stroke-width:2px;
stroke-linecap:round;
}
text {
font-size:40px;
font-family:stix;
text-anchor:middle;
}
</style>
<g id="layer1">
<path id="strikeout1" class='tekst' d="M 398,390 L 400,400">
<animate id="first" attributeName="stroke-dashoffset" from="" to="0"
dur="2s" begin="2s"
onload="var length = parentNode.getTotalLength();
parentNode.setAttribute('stroke-dasharray',length+','+length);
this.setAttribute('from',length)" />
</path>
<path fill="none" id="strikeout2" class='tekst' d="M400,380 L398,390">
<animate id="second" attributeName="stroke-dashoffset" from="0" to="0"
fill="freeze" dur="1s" begin="first.end" onload="var length = parentNode.getTotalLength();
parentNode.setAttribute('stroke-dasharray',length+','+length);
this.setAttribute('from',length);" />
</path>
</g>
<rect id="rect" width="100%" height="100%" fill="none" pointer-events="all"/>
</svg>
アニメーションはページ読み込みの 1 秒後に開始されますが、アニメーションが開始する前に各セグメントが表示されていることがわかります。それらをアニメーション化した後にのみ表示するにはどうすればよいですか?