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切换），或者您可以在您定位的 dasharray 中有一个很大的间隙，以便最初使路径不可见。

于 2013-07-08T07:58:46.380 回答