SVG path : Animation and Merging -


i have 2 questions svg path in example below.

  1. how can animate paths 1 after each other ?
  2. can merge 1 path ?

sample:

<svg width="100" height="100" viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" version="1.1"  baseprofile="full">  <path d="m52.25,14c0.25,2.28-0.52,3.59-1.8,5.62c-5.76,9.14-17.9,27-39.2,39.88" style="fill:none;stroke:black;stroke-width:2" /> <path d="m54.5,19.25c6.73,7.3,24.09,24.81,32.95,31.91c2.73,2.18,5.61,3.8,9.05,4.59" style="fill:none;stroke:black;stroke-width:2"> <animate attributename="stroke-dasharray" values="0,100;100,100" begin="0s" dur="5s" /></path> </svg> 

you can set begin attribute of animtation id of animation element + .end begin when other animation ends? e.g.

<svg width="100" height="100" viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" version="1.1"  baseprofile="full">  <path d="m52.25,14c0.25,2.28-0.52,3.59-1.8,5.62c-5.76,9.14-17.9,27-39.2,39.88" style="fill:none;stroke:black;stroke-width:2" /> <path d="m54.5,19.25c6.73,7.3,24.09,24.81,32.95,31.91c2.73,2.18,5.61,3.8,9.05,4.59" style="fill:none;stroke:black;stroke-width:2"> <animate id="one" attributename="stroke-dasharray" values="0,100;100,100" begin="0s" dur="2s" fill="freeze"/> <animate attributename="stroke" values="red" begin="one.end" dur="2s" /> </path> </svg> 

not sure mean point 2. perhaps should ask question , make clearer mean merge 1 path?


Comments

Popular posts from this blog

c# - DetailsView in ASP.Net - How to add another column on the side/add a control in each row? -

javascript - firefox memory leak -

Trying to import CSV file to a SQL Server database using asp.net and c# - can't find what I'm missing -