Why am I doing wrong in the following code snnipet? Why is the rectangle not being animated in Chrome(v 39) and Firefox(v 33) after the circle ends its animation?
<!doctype html>
<html>
<head>
<title>test</title>
</head>
<body>
<svg width="500" height="350">
<circle id="orange-circle" r="30" cx="50" cy="50" fill="orange" />
<rect id="blue-rectangle" width="50" height="50" x="25" y="200" fill="#0099cc"></rect>
<animate
xlink:href="#orange-circle"
attributeName="cx"
from="50"
to="450"
dur="5s"
begin="click"
fill="freeze"
id="circ-anim"/>
<animate
xlink:href="#blue-rectangle"
attributeName="x"
from="50"
to="425"
dur="5s"
begin="circ-anim.end"
fill="freeze"
id="rect-anim"/>
</svg>
<p>Click on the circle to animate it, and animate the rectangle after it.</p>
</body>
</html>
Either change the id of the circle from circ-anim to say circ and fix up the begin reference or escape the - sign and it will work.
SMIL uses + and - to indicate offsets e.g. begin="circ.end - 1" would start 1 second before the end of the circ animation ends so you can't use + or - in ids that you want to animate.
You can escape the id in SMIL via
xlink:href="#orange\-circle"
if you really want to keep the sign character.
The SMIL specification says this about parsing the begin attribute...
Build a token substring up to but not including any sign indicator (i.e. strip off any offset)...