I am a little new on SVG and SVG Animation. I am working on a little app which does the alpha letter writing. I have a below code which seems to be working very smoothly on chrome but not working on Firefox and Safari.
Here I am trying to start the animation 1) at window load, 2) when user clicks on the text. So none is working on Firefox and Safari. I am not sure what tricks is there that I am missing which is making the function not work.
I found and checked this link, and this is what something similar I am trying to do. SVG trigger animation with event
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
<title>SVG Animate</title>
<script><![CDATA[
window.onload = function() {
var ele = document.getElementById('Zanim');
ele.beginElement();
}
function startAnimate(){
var ele = document.getElementById('Zanim');
ele.beginElement();
}
]]></script>
<defs>
<!--ZZZ-->
<g id="Zz">
<g class="animation-group">
<g class="background">
<path d="M 271.5,471.1 C 263.4,456.8 257.9,431.9 247.7,420.8 230.4,422.9 180.8,309.9 181.4,284.7 181.8,267.1 191.5,233.7 200.7,224.4 205.0,220.1 210.0,209.2 222.8,208.9 223.4,179.0 251.6,169.2 266.0,163.0 272.8,138.6 314.0,126.5 331.8,126.5 335.5,115.8 343.7,110.5 351.7,99.4 357.6,80.1 371.7,68.0 373.6,64.3 379.5,52.4 396.7,40.9 414.2,47.4 435.3,55.2 417.2,84.5 412.6,93.9 412.5,106.7 403.4,129.1 400.1,135.6 399.5,146.8 391.0,167.1 391.0,168.0 391.0,170.7 402.5,177.2 405.4,179.1 418.2,186.5 428.4,204.9 441.2,218.0 455.5,232.5 464.7,244.9 465.1,251.5 462.5,325.4 436.2,374.4 436.3,385.9 436.6,423.7 450.3,449.6 461.8,473.3" />
</g>
<g class="digits">
<path d="M 222.8,208.4 C 245.2,214.3 266.3,223.4 278.2,236.6 284.1,243.1 286.5,259.3 281.5,274.2 283.3,287.2 284.6,302.9 272.1,302.7 250.1,302.3 242.4,280.4 241.9,272.2 241.9,272.2 235.4,276.5 232.2,278.1 226.3,281.0 210.4,283.6 202.9,283.6" />
<path d="M 267.1,163.6 C 274.7,161.2 284.9,163.4 291.0,172.0 306.7,193.7 338.1,246.4 340.6,273.3 344.5,289.3 346.0,301.4 335.7,304.9 304.2,315.4 289.6,268.8 285.1,259.8" />
<path d="M 391.3,169.7 C 374.4,164.6 359.4,149.4 346.7,143.1 343.3,141.4 339.2,144.1 336.8,145.3 321.2,153.1 325.4,172.4 330.1,186.5 338.3,210.9 365.1,222.6 373.6,229.9 385.2,241.6 387.3,271.0 403.7,279.2 409.7,282.2 417.5,283.0 423.1,285.8" />
<path d="M 385.4,253.2 C 404.7,293.5 362.5,317.2 339.3,266.7" />
</g>
<g class="details">
<path d="M 278.8,454.5 C 304.3,462.3 336.1,445.1 348.8,424.0" />
<path d="M 359.4,416.9 C 374.2,422.1 393.4,426.8 408.2,420.4" />
<path d="M 328.9,307.0 C 328.4,342.2 344.5,376.9 378.9,388.4 386.9,391.0 397.8,392.1 404.3,394.2" />
<path d="M 251.8,292.9 C 237.4,304.8 215.5,308.6 201.4,315.6" />
<path d="M 234.2,296.5 C 218.4,303.4 206.2,296.9 190.8,296.9" />
<path d="M 207.6,263.6 C 218.3,270.0 228.9,276.5 241.6,271.4 244.3,269.0 248.1,267.4 249.9,266.0" />
<path d="M 356.6,220.2 C 348.0,220.4 339.2,222.2 332.8,226.1" />
<path d="M 323.8,228.4 C 316.7,232.3 310.1,236.7 303.0,239.8" />
<path d="M 412.9,189.7 C 410.1,198.3 406.5,201.0 399.3,205.3" />
<path d="M 384.0,105.2 C 394.7,105.0 404.4,102.5 411.8,95.1" />
<path d="M 376.6,137.3 C 384.6,139.7 394.3,137.8 400.0,133.0" />
<path d="M 367.6,225.3 C 375.3,227.8 383.4,231.8 393.0,228.3" />
<path d="M 256.7,200.3 C 253.9,208.9 260.6,221.8 260.6,221.8" />
<path d="M 331.9,126.1 C 340.1,130.9 344.1,142.6 344.1,142.6" />
</g>
<g class="nails">
<path d="M 348.4,143.9 C 343.7,152.0 348.1,169.1 353.5,174.4 356.4,177.3 372.0,188.7 376.2,186.6 382.7,181.2 381.8,178.8 384.4,166.6 370.9,160.6 362.7,152.7 348.4,143.9 Z" />
<path d="M 354.1,261.1 C 357.6,252.9 379.5,245.6 384.8,251.7 388.2,257.8 393.5,274.0 389.1,279.3 386.6,283.4 368.7,289.0 363.0,287.9 355.9,283.1 354.9,268.9 354.1,261.1 Z" />
<path d="M 320.4,284.8 C 323.9,276.6 335.0,269.6 340.3,275.7 342.0,282.0 345.7,293.0 342.9,300.8 340.5,304.9 330.2,304.1 324.6,303.0 320.0,297.2 321.1,292.6 320.4,284.8 Z" />
<path d="M 269.5,283.7 C 269.5,283.7 275.2,276.2 280.8,276.5 284.2,282.6 282.9,295.5 278.5,300.8 276.0,304.9 274.4,303.6 268.7,302.5 265.8,297.2 268.0,291.5 269.5,283.7 Z" />
</g>
<animateMotion id="Zanim"
path="M -200,0 l 200,0 l -200,200 l 200,0 "
begin="indefinite" dur="5s" />
</g>
</g>
</defs>
<use id="target" xlink:href="#Zz" />
<text id="Z" class="text letter letter" x="20" y="50" onclick="startAnimate();" title="Click to Sign Z">Click to Animate</text>
</svg>
Could someone please help me? Thanks a lot in advance.
Thanks, Milan
