Re: animating the fill attribute of SVG with values changing from url(#g1) to url(#g2)
"Cameron Laird [email protected] [svg-developers]" <[email protected]> Sat, 27 Feb 2016 15:39:50 -0600
| Newsgroups | gmane.text.xml.svg.devel |
|---|---|
| Message-ID | <CAC7gT6hr9VGUnJx0yqpJFZkAD3y0iAANr5PpsM5-t578ma5Lmw@mail.gmail.com> |
--001a1142cf74612db0052cc741c9 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: quoted-printable Rather than just "... nowadays easier to change specs than to fix bugs in one=E2=80=99s code", it's been going on for centuries--or, if we restrict o= ur attention to computing, at least the early '60s. Cameron Laird, vice president We make computers work for people. On Sat, Feb 27, 2016 at 3:34 PM, 'David Dailey' [email protected] [svg-developers] <[email protected]> wrote: > > > Hi folks, (apologies for also posting this at stackoverflow, but I find > that place difficult to use) > > http://cs.sru.edu/~ddailey/ello/randomGradientsAnim.svg works fine in > Firefox, but not in Chrome, perhaps because of Chrome's lack of support f= or > standardized SVG animation. relevant code: > > <animate attributeName=3D"fill" repeatCount=3D"indefinite" dur=3D"3s" > values=3D"url(#g0);url(#g1);url(#g2);url(#g3);url(#g4)" /> > > > > Okay, so let's say I assume for a moment that CSS is the way to go: > http://cs.sru.edu/~ddailey/ello/randomGradientsAnim3.svg Here, using CSS > to do the animation works for named colors but not for gradients with loc= al > URL=E2=80=99s in either FF or Chrome. Is there a workaround? > > > > Can we assume that the Chrome team will never again fix a SVG > standards-related browser bug? Apparently it is nowadays easier to change > specs than to fix bugs in one=E2=80=99s code. > > > > Cheers > > David > > >=20 > --001a1142cf74612db0052cc741c9 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> <style type=3D"text/css"> <!-- #ygrp-mkp { border: 1px solid #d8d8d8; font-family: Arial; margin: 10px 0; padding: 0 10px; } #ygrp-mkp hr { border: 1px solid #d8d8d8; } #ygrp-mkp #hd { color: #628c2a; font-size: 85%; font-weight: 700; line-height: 122%; margin: 10px 0; } #ygrp-mkp #ads { margin-bottom: 10px; } #ygrp-mkp .ad { padding: 0 0; } #ygrp-mkp .ad p { margin: 0; } #ygrp-mkp .ad a { color: #0000ff; text-decoration: none; } --> </style> </head> <body> <!-- |**|begin egp html banner|**| --> <br><br> <!-- |**|end egp html banner|**| --> <div dir=3D"ltr">Rather than just "... nowadays=C2=A0<span style=3D"co= lor:rgb(34,36,38);font-family:Arial,sans-serif">easier to change specs than= to fix bugs in one=E2=80=99s code", it's been going on for centur= ies--or, if we restrict our attention to computing, at least the early '= ;60s.</span></div><div class=3D"gmail_extra"><br clear=3D"all"><div><div cl= ass=3D"gmail_signature"><div dir=3D"ltr"><div><div dir=3D"ltr"><div><div di= r=3D"ltr">Cameron Laird, vice president</div><div dir=3D"ltr"><img src=3D"h= ttp://phaseit.net/images/phase-it-logo-web.jpg" style=3D"font-size:12.8px">= </div><div><font size=3D"4" color=3D"#ff0000">We make computers work for pe= ople.</font></div></div></div></div></div></div></div> <br><div class=3D"gmail_quote">On Sat, Feb 27, 2016 at 3:34 PM, 'David = Dailey' <a href=3D"mailto:[email protected]">ddailey@zoominterne= t.net</a> [svg-developers] <span dir=3D"ltr"><<a href=3D"mailto:svg-deve= [email protected]" target=3D"_blank">[email protected]</a= >></span> wrote:<br><blockquote class=3D"gmail_quote" style=3D"margin:0 = 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex"> =20=20=20=20=20=20=20=20 <div lang=3D"EN-US" link=3D"blue" vlink=3D"purple"> <br><br> <div><p class=3D"MsoNormal"><span style=3D"font-size:11.5pt;font-family:&qu= ot;Arial","sans-serif";color:#222426">Hi folks, (apologies f= or also posting this at stackoverflow, but I find that place difficult to u= se)<u></u><u></u></span></p><p class=3D"MsoNormal"><span style=3D"font-size= :11.5pt;font-family:"Arial","sans-serif";color:#222426"= ><a href=3D"http://cs.sru.edu/~ddailey/ello/randomGradientsAnim.svg" target= =3D"_blank">http://cs.sru.edu/~ddailey/ello/randomGradientsAnim.svg</a> wor= ks fine in Firefox, but not in Chrome, perhaps because of Chrome's lack= of support for standardized SVG animation. relevant code: <u></u><u></u></= span></p><p class=3D"MsoNormal"><span style=3D"font-size:11.5pt;font-family= :"Arial","sans-serif";color:#222426"><animate attrib= uteName=3D"fill" repeatCount=3D"indefinite" dur=3D"= ;3s" values=3D"url(#g0);url(#g1);url(#g2);url(#g3);url(#g4)"= /><u></u><u></u></span></p><p class=3D"MsoNormal"><span style=3D"font-s= ize:11.5pt;font-family:"Arial","sans-serif";color:#2224= 26"><u></u>=C2=A0<u></u></span></p><p class=3D"MsoNormal"><span style=3D"fo= nt-size:11.5pt;font-family:"Arial","sans-serif";color:#= 222426">Okay, so let's say I assume for a moment that CSS is the way to= go: <a href=3D"http://cs.sru.edu/~ddailey/ello/randomGradientsAnim3.svg" t= arget=3D"_blank">http://cs.sru.edu/~ddailey/ello/randomGradientsAnim3.svg</= a> Here, using CSS to do the animation works for named colors but not for g= radients with local URL=E2=80=99s in either FF or Chrome. Is there a workar= ound?<u></u><u></u></span></p><p class=3D"MsoNormal"><span style=3D"font-si= ze:11.5pt;font-family:"Arial","sans-serif";color:#22242= 6"><u></u>=C2=A0<u></u></span></p><p class=3D"MsoNormal"><span style=3D"fon= t-size:11.5pt;font-family:"Arial","sans-serif";color:#2= 22426">Can we assume that the Chrome team will never again fix a SVG standa= rds-related browser bug? Apparently it is nowadays easier to change specs t= han to fix bugs in one=E2=80=99s code. <u></u><u></u></span></p><p class=3D= "MsoNormal"><span style=3D"font-size:11.5pt;font-family:"Arial",&= quot;sans-serif";color:#222426"><u></u>=C2=A0<u></u></span></p><p clas= s=3D"MsoNormal"><span style=3D"font-size:11.5pt;font-family:"Arial&quo= t;,"sans-serif";color:#222426">Cheers<u></u><u></u></span></p><p = class=3D"MsoNormal"><span style=3D"font-size:11.5pt;font-family:"Arial= ","sans-serif";color:#222426">David</span><u></u><u></u></p>= </div> <br> <br> <div width=3D"1" style=3D"color:white;clear:both"></div> </blockquote></div><br></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: Cameron Laird <[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=3D66538/stime=3D1456609193" width=3D"1" height=3D"1"> = <br> <!-- |**|end egp html banner|**| --> =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=3DX3oDMTJlODJpdTRoBF9TAzk3MzU5NzE0BGdycElkAzEyOTg0MjEEZ3= Jwc3BJZAMxNzA2MDMwMzkwBHNlYwN2dGwEc2xrA3ZnaHAEc3RpbWUDMTQ1NjYwOTE5Mw--" 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;"> </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=3DX3oDMTJkMmU0aGxvBF9TAzk3ND= c2NTkwBGdycElkAzEyOTg0MjEEZ3Jwc3BJZAMxNzA2MDMwMzkwBHNlYwNmdHIEc2xrA2dmcARzd= GltZQMxNDU2NjA5MTkz" 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> --001a1142cf74612db0052cc741c9--