隐藏动画前的svg片段

我在这里有一个SVG动画：http://jsfiddle.net/LANjy/3用以下代码。隐藏动画前的svg片段

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

来源

2013-07-08 victor

您正在使用JavaScript，所以您要做的第一件事就是将您的代码放在脚本块中，而不是使用内联代码。例如。 http://jsfiddle.net/LANjy/3（这并不能解决你的问题，但让人们更容易帮助你，并让你继续努力） –

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

下面是用脚本部分修改的小提琴感动：http://jsfiddle.net/LANjy/5/

要隐藏的行程，你可以添加其他动画（如visibility:hidden切换），或者你可以在dasharray你位置，有较大差距该路径最初是隐形的。

来源

2013-07-08 07:58:46

隐藏动画前的svg片段

回答

相关问题