0

ここに 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 秒後に開始されますが、アニメーションが開始する前に各セグメントが表示されていることがわかります。それらをアニメーション化した後にのみ表示するにはどうすればよいですか?

4

1 に答える 1

0

load要素でイベントが発生することはないと思います。animate外部参照を持つルート svg と要素だけがそのようなイベントを見る必要があります。

これは、スクリプト部分が移動された修正されたフィドルです: http://jsfiddle.net/LANjy/5/

ストロークを非表示にするには、別のアニメーション (visibility:hiddenトグルなど) を追加するか、最初にパスが非表示になるように配置するダッシュ配列に広いギャップを設けることができます。

于 2013-07-08T07:58:46.380 に答える