animating the fill attribute of SVG with values changing from url(#g1) to url(#g2)
"'David Dailey' [email protected] [svg-developers]" <[email protected]> Sat, 27 Feb 2016 16:34:01 -0500
| Newsgroups | gmane.text.xml.svg.devel |
|---|---|
| Message-ID | <000f01d171a6$9350a220$b9f1e660$@net> |
------=_NextPart_000_0010_01D1717C.AA7A9A20
Content-Type: text/plain;
charset="us-ascii"
Content-Transfer-Encoding: 7bit
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 for
standardized SVG animation. relevant code:
<animate attributeName="fill" repeatCount="indefinite" dur="3s"
values="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 local
URL's 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's code.
Cheers
David
------=_NextPart_000_0010_01D1717C.AA7A9A20
Content-Type: text/html; charset=US-ASCII
Content-Transfer-Encoding: 7bit
<head>
<style type="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
a,
div.photo-title a:active,
div.photo-title a:hover,
div.photo-title a:visited {
text-decoration: none;
}
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 xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns="http://www.w3.org/TR/REC-html40"><head><meta http-equiv=Content-Type content="text/html; charset=us-ascii"><meta name=Generator content="Microsoft Word 12 (filtered medium)"><style><!--
/* Font Definitions */
@font-face
{font-family:"Cambria Math";
panose-1:2 4 5 3 5 4 6 3 2 4;}
@font-face
{font-family:Calibri;
panose-1:2 15 5 2 2 2 4 3 2 4;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{margin:0in;
margin-bottom:.0001pt;
font-size:11.0pt;
font-family:"Calibri","sans-serif";}
a:link, span.MsoHyperlink
{mso-style-priority:99;
color:blue;
text-decoration:underline;}
a:visited, span.MsoHyperlinkFollowed
{mso-style-priority:99;
color:purple;
text-decoration:underline;}
span.EmailStyle17
{mso-style-type:personal-compose;
font-family:"Calibri","sans-serif";
color:windowtext;}
.MsoChpDefault
{mso-style-type:export-only;}
@page WordSection1
{size:8.5in 11.0in;
margin:1.0in 1.0in 1.0in 1.0in;}
div.WordSection1
{page:WordSection1;}
--></style><!--[if gte mso 9]><xml>
<o:shapedefaults v:ext="edit" spidmax="1026" />
</xml><![endif]--><!--[if gte mso 9]><xml>
<o:shapelayout v:ext="edit">
<o:idmap v:ext="edit" data="1" />
</o:shapelayout></xml><![endif]--></head><body lang=EN-US link=blue vlink=purple>
<!-- |**|begin egp html banner|**| -->
<br><br>
<!-- |**|end egp html banner|**| -->
<div class=WordSection1><p class=MsoNormal><span style='font-size:11.5pt;font-family:"Arial","sans-serif";color:#222426'>Hi folks, (apologies for also posting this at stackoverflow, but I find that place difficult to use)<o:p></o:p></span></p><p class=MsoNormal><span style='font-size:11.5pt;font-family:"Arial","sans-serif";color:#222426'><a href="http://cs.sru.edu/~ddailey/ello/randomGradientsAnim.svg">http://cs.sru.edu/~ddailey/ello/randomGradientsAnim.svg</a> works fine in Firefox, but not in Chrome, perhaps because of Chrome's lack of support for standardized SVG animation. relevant code: <o:p></o:p></span></p><p class=MsoNormal><span style='font-size:11.5pt;font-family:"Arial","sans-serif";color:#222426'><animate attributeName="fill" repeatCount="indefinite" dur=
"3s" values="url(#g0);url(#g1);url(#g2);url(#g3);url(#g4)" /><o:p></o:p></span></p><p class=MsoNormal><span style='font-size:11.5pt;font-family:"Arial","sans-serif";color:#222426'><o:p> </o:p></span></p><p class=MsoNormal><span style='font-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="http://cs.sru.edu/~ddailey/ello/randomGradientsAnim3.svg">http://cs.sru.edu/~ddailey/ello/randomGradientsAnim3.svg</a> Here, using CSS to do the animation works for named colors but not for gradients with local URL’s in either FF or Chrome. Is there a workaround?<o:p></o:p></span></p><p class=MsoNormal><span style='font-size:11.5pt;font-family:"Arial","sans-serif";color:#222426'><o:p>
</o:p></span></p><p class=MsoNormal><span style='font-size:11.5pt;font-family:"Arial","sans-serif";color:#222426'>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’s code. <o:p></o:p></span></p><p class=MsoNormal><span style='font-size:11.5pt;font-family:"Arial","sans-serif";color:#222426'><o:p> </o:p></span></p><p class=MsoNormal><span style='font-size:11.5pt;font-family:"Arial","sans-serif";color:#222426'>Cheers<o:p></o:p></span></p><p class=MsoNormal><span style='font-size:11.5pt;font-family:"Arial","sans-serif";color:#222426'>David</span><o:p></o:p></p></div>
<!-- |**|begin egp html banner|**| -->
<br>
<br>
<!-- |**|end egp html banner|**| -->
<div width="1" style="color: white; clear: both;"/>__._,_.___</div>
<div id="fromDMARC" style="clear:both; margin-top: 10px;">
<hr style="height:2px ; border-width:0; color:#E3E3E3; background-color:#E3E3E3;">
Posted by: "David Dailey" <[email protected]> <hr style="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]<BR>
-or-<BR>
visit <a href="http://groups.yahoo.com/group/svg-developers">http://groups.yahoo.com/group/svg-developers</a> and click "edit my membership"<BR>
----</tt>
<br><br>
<!-- |**|end egp html banner|**| -->
<!-- |**|begin egp html banner|**| -->
<img src="http://geo.yahoo.com/serv?s=97476590/grpId=1298421/grpspId=1706030390/msgId=66534/stime=1456608855" width="1" height="1"> <br>
<!-- |**|end egp html banner|**| -->
<!-- |**|begin egp html banner|**| -->
<br>
<!-- |**|begin egp html banner|**| -->
<div id="ygrp-vital" style="background-color: #f2f2f2; font-family: Verdana; font-size: 10px; margin-bottom: 10px; padding: 10px;">
<span id="vithd" style="font-weight: bold; color: #333; text-transform: uppercase; "><a href="https://groups.yahoo.com/neo/groups/svg-developers/info;_ylc=X3oDMTJlb3JqZHZkBF9TAzk3MzU5NzE0BGdycElkAzEyOTg0MjEEZ3Jwc3BJZAMxNzA2MDMwMzkwBHNlYwN2dGwEc2xrA3ZnaHAEc3RpbWUDMTQ1NjYwODg1NA--" style="text-decoration: none;">Visit Your Group</a></span>
<ul style="list-style-type: none; margin: 0; padding: 0; display: inline;">
</ul>
</div>
<div id="ft" style="font-family: Arial; font-size: 11px; margin-top: 5px; padding: 0 2px 0 0; clear: both;">
<a href="https://groups.yahoo.com/neo;_ylc=X3oDMTJkcWQxcW51BF9TAzk3NDc2NTkwBGdycElkAzEyOTg0MjEEZ3Jwc3BJZAMxNzA2MDMwMzkwBHNlYwNmdHIEc2xrA2dmcARzdGltZQMxNDU2NjA4ODU1" style="float: left;"><img src="http://l.yimg.com/ru/static/images/yg/img/email/new_logo/logo-groups-137x15.png" height="15" width="137" alt="Yahoo! Groups" style="border: 0;"/></a>
<div style="color: #747575; float: right;"> • <a href="https://info.yahoo.com/privacy/us/yahoo/groups/details.html" style="text-decoration: none;">Privacy</a> • <a href="mailto:[email protected]?subject=Unsubscribe" style="text-decoration: none;">Unsubscribe</a> • <a href="https://info.yahoo.com/legal/us/yahoo/utos/terms/" style="text-decoration: none;">Terms of Use</a> </div>
</div>
<!-- |**|end egp html banner|**| -->
</div> <!-- ygrp-msg -->
<br>
<!-- |**|end egp html banner|**| -->
<div style="color: white; clear: both;"/>__,_._,___</div>
</body></html>
------=_NextPart_000_0010_01D1717C.AA7A9A20--