Question

我在这里有一个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秒开始，但您会注意到在动画开始之前每个片段都是可见的。如何让它们在动画制作后才会出现？

Answer 1

我认为你不会在load元素上获得animate事件，只有root svg和具有外部引用的元素应该看到这样的事件。

以下是移动脚本部分的改进小提琴：http://jsfiddle.net/LANjy/5/

要隐藏笔划，您可以添加另一个动画（例如visibility:hidden切换），或者您可以在dasharray中设置一个较大的间隙，使您最初使路径不可见。

在动画之前隐藏svg段

1 个答案: