Question on SMIL timelines
"Jacob Beard [email protected] [svg-developers]" <[email protected]> Wed, 22 Feb 2017 00:41:27 -0500
| Newsgroups | gmane.text.xml.svg.devel |
|---|---|
| Message-ID | <[email protected]> |
--Apple-Mail=_18C71056-03C3-4F05-82D1-777593F14011
Content-Transfer-Encoding: quoted-printable
Content-Type: text/plain;
charset=utf-8
Hi all,
I am trying to understand an advanced usage of SMIL, where animation elemen=
ts are dynamically added to DOM. Please consider the following reduced exam=
ple:
https://jsfiddle.net/cor337wn/ <https://jsfiddle.net/cor337wn/>
The example creates two path elements, path1 and path2, with SMIL animation=
elements, animation1 and animation2. animation1 is triggered by JavaScript=
(begin=3D=E2=80=9Cindefinite=E2=80=9D) and animation2 begins after animati=
on1 ends (begin=3D=E2=80=9Canimation1.end=E2=80=9D). This works as expected=
.
The example script then creates a third element and animation (path3, anima=
tion3) that references animation1 (begin=3D=E2=80=9Canimation1.end=E2=80=9D=
). animation1 has already ended when path3 and animation3 are added to DOM.=
=20
My concern is, in Chrome and Safari, when path3 is added to DOM, path3 appe=
ars in a state as though animation3 has already ended (d=3D"M0,0 L105,76=E2=
=80=99=E2=80=9D). However, in Firefox, when path3 is added to DOM, it appea=
rs in a state as though animation3 had not yet started (d=3D=E2=80=9CM0,0 L=
0,0=E2=80=9D). Firefox=E2=80=99s behavior seems more intuitively correct to=
me, because, SMIL event "animation1.end=E2=80=9D had fired before animatio=
n3 had been added to DOM, and therefore animation3 should not have been pre=
sent to receive the "animation1.end" event.
I am wondering if there is a way to achieve Firefox=E2=80=99s behavior in C=
hrome and Safari, such that path3 appears in a start state when added to DO=
M (d=3D=E2=80=9CM0,0 L0,0=E2=80=9D); and animation3 restarts whenever anima=
tion1 is restarted (using beginElement) and ends.=20
I was also wondering which browser=E2=80=99s behavior is more compliant wit=
h regard to the SMIL specification? I understand that SMIL is deprecated in=
Chrome, and therefore any bugs are unlikely to be fixed, but I am still in=
terested in correctness with regard to the spec.
Please let me know what you think, and thank you for your help with this,
Jake
--Apple-Mail=_18C71056-03C3-4F05-82D1-777593F14011
Content-Type: text/html; charset=UTF-8
Content-Transfer-Encoding: quoted-printable
<head>
<style type=3D"text/css">
<!--
/* start of attachment style */
.ygrp-photo-title{
clear: both;
font-size: smaller;
height: 15px;
overflow: hidden;
text-align: center;
width: 75px;
}
div.ygrp-photo{
background-position: center;
background-repeat: no-repeat;
background-color: white;
border: 1px solid black;
height: 62px;
width: 62px;
}
div.photo-title=20
a,
div.photo-title a:active,
div.photo-title a:hover,
div.photo-title a:visited {
text-decoration: none;=20
}
div.attach-table div.attach-row {
clear: both;
}
div.attach-table div.attach-row div {
float: left;
/* margin: 2px;*/
}
p {
clear: both;
padding: 15px 0 3px 0;
overflow: hidden;
}
div.ygrp-file {
width: 30px;
valign: middle;
}
div.attach-table div.attach-row div div a {
text-decoration: none;
}
div.attach-table div.attach-row div div span {
font-weight: normal;
}
div.ygrp-file-title {
font-weight: bold;
}
/* end of attachment style */
-->
</style>
</head>
<html><head><meta http-equiv=3D"Content-Type" content=3D"text/html charset=
=3Dutf-8"></head><body style=3D"word-wrap: break-word; -webkit-nbsp-mode: s=
pace; -webkit-line-break: after-white-space;" class=3D"">
<!-- |**|begin egp html banner|**| -->
<br><br>
<!-- |**|end egp html banner|**| -->
Hi all,<div class=3D""><br class=3D""></div><div class=3D"">I am trying to =
understand an advanced usage of SMIL, where animation elements are dynamica=
lly added to DOM. Please consider the following reduced example:</div><div =
class=3D""><br class=3D""></div><div class=3D""><a href=3D"https://jsfiddle=
.net/cor337wn/" class=3D"">https://jsfiddle.net/cor337wn/</a></div><div cla=
ss=3D""><br class=3D""></div><div class=3D"">The example creates two path e=
lements, path1 and path2, with SMIL animation elements, animation1 and anim=
ation2. animation1 is triggered by JavaScript (begin=3D=E2=80=9Cindefinite=
=E2=80=9D) and animation2 begins after animation1 ends (begin=3D=E2=80=9Can=
imation1.end=E2=80=9D). This works as expected.</div><div class=3D""><br cl=
ass=3D""></div><div class=3D"">The example script then creates a third elem=
ent and animation (path3, animation3) that references animation1 (begin=3D=
=E2=80=9Canimation1.end=E2=80=9D). animation1 has already ended when path3 =
and animation3 are added to DOM. </div><div class=3D""><br class=3D"">=
</div><div class=3D""><div class=3D"">My concern is, in Chrome and Safari, =
when path3 is added to DOM, path3 appears in a state as though animation3 h=
as already ended (d=3D"M0,0 L105,76=E2=80=99=E2=80=9D). However, in Firefox=
, when path3 is added to DOM, it appears in a state as though animation3 ha=
d not yet started (d=3D=E2=80=9CM0,0 L0,0=E2=80=9D). Firefox=E2=80=99s beha=
vior seems more intuitively correct to me, because, SMIL event "animation1.=
end=E2=80=9D had fired before animation3 had been added to DOM, and therefo=
re animation3 should not have been present to receive the "animation1.end" =
event.</div></div><div class=3D""><br class=3D""></div><div class=3D"">I am=
wondering if there is a way to achieve Firefox=E2=80=99s behavior in Chrom=
e and Safari, such that path3 appears in a start state when added to DOM (d=
=3D=E2=80=9CM0,0 L0,0=E2=80=9D); and animation3 restarts whenever animation=
1 is restarted (using beginElement) and ends. </div><div class=3D""><b=
r class=3D""></div><div class=3D"">I was also wondering which browser=E2=80=
=99s behavior is more compliant with regard to the SMIL specification? I un=
derstand that SMIL is deprecated in Chrome, and therefore any bugs are unli=
kely to be fixed, but I am still interested in correctness with regard to t=
he spec.</div><div class=3D""><br class=3D""></div><div class=3D"">Please l=
et me know what you think, and thank you for your help with this,</div><div=
class=3D""><br class=3D""></div><div class=3D"">Jake</div><div class=3D"">=
<br class=3D""></div>
<!-- |**|begin egp html banner|**| -->
<br>
<br>
<!-- |**|end egp html banner|**| -->
<div width=3D"1" style=3D"color: white; clear: both;"/>__._,_.___</div>
=20=20=20=20=20=20
=20=20
=20=20=20=20
<div id=3D"fromDMARC" style=3D"clear:both; margin-top: 10px;">
<hr style=3D"height:2px ; border-width:0; color:#E3E3E3; backgroun=
d-color:#E3E3E3;">
Posted by: Jacob Beard <[email protected]> <hr st=
yle=3D"height:2px ; border-width:0; color:#E3E3E3; background-color:#E3E3E3=
;">
</div>
<!-- Start Recommendations -->
<!-- End Recommendations -->
<!-- |**|begin egp html banner|**| -->
<br><br>
<tt>
-----<BR>
To unsubscribe send a message to: [email protected]=
m<BR>
-or-<BR>
visit <a href=3D"http://groups.yahoo.com/group/svg-developers">http://group=
s.yahoo.com/group/svg-developers</a> and click "edit my membership&quo=
t;<BR>
----</tt>
<br><br>
<!-- |**|end egp html banner|**| -->
<!-- |**|begin egp html banner|**| -->
<img src=3D"http://geo.yahoo.com/serv?s=3D97476590/grpId=3D1298421/grpspI=
d=3D1706030390/msgId=3D66562/stime=3D1487742091" width=3D"1" height=3D"1"> =
<br>
<!-- |**|end egp html banner|**| -->
=20=20=20=20
<!-- |**|begin egp html banner|**| -->
<br>
=20=20=20
=20=20=20=20=20
=20
<!-- |**|begin egp html banner|**| -->
<div id=3D"ygrp-vital" style=3D"background-color: #f2f2f2; font-fam=
ily: Verdana; font-size: 10px; margin-bottom: 10px; padding: 10px;">
<span id=3D"vithd" style=3D"font-weight: bold; color: #333; text-tr=
ansform: uppercase; "><a href=3D"https://groups.yahoo.com/neo/groups/svg-de=
velopers/info;_ylc=3DX3oDMTJlY2o0NWdjBF9TAzk3MzU5NzE0BGdycElkAzEyOTg0MjEEZ3=
Jwc3BJZAMxNzA2MDMwMzkwBHNlYwN2dGwEc2xrA3ZnaHAEc3RpbWUDMTQ4Nzc0MjA5MA--" sty=
le=3D"text-decoration: none;">Visit Your Group</a></span>
<ul style=3D"list-style-type: none; margin: 0; padding: 0; display: in=
line;">
<li style=3D"border-right: 1px solid #000; font-weight: 700; di=
splay: inline; padding: 0 5px; margin-left: 0;">
<span class=3D"cat"><a href=3D"https://groups.yahoo.com/neo/groups/sv=
g-developers/members/all;_ylc=3DX3oDMTJmMTduZTc1BF9TAzk3MzU5NzE0BGdycElkAzE=
yOTg0MjEEZ3Jwc3BJZAMxNzA2MDMwMzkwBHNlYwN2dGwEc2xrA3ZtYnJzBHN0aW1lAzE0ODc3ND=
IwOTA-" style=3D"text-decoration: none;">New Members</a></span>
<span class=3D"ct" style=3D"color: #ff7900;">1</span>
</li>
</ul>
</div>
<div id=3D"ft" style=3D"font-family: Arial; font-size: 11px; margin-top: 5p=
x; padding: 0 2px 0 0; clear: both;">
<a href=3D"https://groups.yahoo.com/neo;_ylc=3DX3oDMTJkaG1iN2dqBF9TAzk3ND=
c2NTkwBGdycElkAzEyOTg0MjEEZ3Jwc3BJZAMxNzA2MDMwMzkwBHNlYwNmdHIEc2xrA2dmcARzd=
GltZQMxNDg3NzQyMDkx" style=3D"float: left;"><img src=3D"http://l.yimg.com/r=
u/static/images/yg/img/email/new_logo/logo-groups-137x15.png" height=3D"15"=
width=3D"137" alt=3D"Yahoo! Groups" style=3D"border: 0;"/></a>
<div style=3D"color: #747575; float: right;"> • <a href=3D"https://i=
nfo.yahoo.com/privacy/us/yahoo/groups/details.html" style=3D"text-decoratio=
n: none;">Privacy</a> • <a href=3D"mailto:svg-developers-unsubscribe@y=
ahoogroups.com?subject=3DUnsubscribe" style=3D"text-decoration: none;">Unsu=
bscribe</a> • <a href=3D"https://info.yahoo.com/legal/us/yahoo/utos/te=
rms/" style=3D"text-decoration: none;">Terms of Use</a> </div>
</div>
<!-- |**|end egp html banner|**| -->
</div> <!-- ygrp-msg -->
=20=20=20
<br>
<!-- |**|end egp html banner|**| -->
<div style=3D"color: white; clear: both;"/>__,_._,___</div>
</body></html>
--Apple-Mail=_18C71056-03C3-4F05-82D1-777593F14011--