CSS animation of SVG -- DIFRENT
"'David Dailey' [email protected] [svg-developers]" <[email protected]> Mon, 3 Aug 2015 15:24:47 -0400
| Newsgroups | gmane.text.xml.svg.devel |
|---|---|
| Message-ID | <001801d0ce22$0fcdf470$2f69dd50$@net> |
------=_NextPart_000_0019_01D0CE00.88BC5470
Content-Type: text/plain;
charset="us-ascii"
Content-Transfer-Encoding: 7bit
Hi all,
I have been engaged in a reeducation program (part of the W3C-school's
Deprogramming Initiative For Regressive Embryonic Natural Training) DIFRENT.
All of one's fundamental assumptions about geometry, infinitesimals,
semantics, color theory, and the nature and purpose of the web itself is
systematically removed so that new fresh and proper thinking might dominate
and push aside all of one's previous habits. The good news is that I can now
barely remember the thousands of experiments with SMIL that I have
performed.
So not to bemoan 15 years of wasted effort in assuming that W3C specs were
actually worth time and energy, I am now once again filled with enthusiasm
for learning yet one more way to do things (though even those in charge
admit we'll never be able to do some things we used to do without
programming).
So I've undertaken a series of small experiments, less than 100 but more
than 20, in using CSS to animate SVG instead of SMIL. Sigh.. If we thought
the last decade of struggling with inconsistent browser implementations of
SVG was fun, oh goodie! More is in store! The situation looks horrible, in
that DIFRENT way, that makes us relish the future!
Is it just the particular experiments I have conducted, or have others
noticed that cross browser consistency in CSS animation of SVG is much less,
at present, than cross-browser consistency of SMIL animation of SVG?
Of the myriad combinations of attributes and hierarchical nestings of
<g><clipPath><pattern><filter><use><replicate><random><mask> and <path>
here's sort of an anecdotal* breakdown of this thing called progress:
SVG + SMIL:
ASV viewer: 96%
Old Opera: 94%
Firefox: 92%
Chrome: 90%
New Opera: 90%
Safari: 78.623%
Internet Explorer: 0%
---------------------
Average: 64.37%
SVG + CSS animation
ASV viewer: N/A
Old Opera: 0%
Firefox: 88%
Chrome: 70%
New Opera: 70%
Safari: 78.623% (amazing coincidence)
Internet Explorer: 10%
----------------------
52.77%
Doesn't it just make you want to learn all the new syntax?
With enthusiastic solidarity for artists and authors everywhere,
David
*anecdotal means purely anecdotal and impressionistic, though I have
published hard objective data about cross-browser performance in the past.
The above numbers are made up: "anecdotal and impressionistic" only!
------=_NextPart_000_0019_01D0CE00.88BC5470
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>Hi all,<o:p></o:p></p><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal>I have been engaged in a reeducation program (part of the W3C-school’s Deprogramming Initiative For Regressive Embryonic Natural Training) DIFRENT. All of one’s fundamental assumptions about geometry, infinitesimals, semantics, color theory, and the nature and purpose of the web itself is systematically removed so that new fresh and proper thinking might dominate and push aside all of one’s previous habits. The good news is that I can now barely remember the thousands of experiments with SMIL that I have performed.<o:p></o:p></p><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal>So not to bemoan 15 years of wasted effort in assuming tha
t W3C specs were actually worth time and energy, I am now once again filled with enthusiasm for learning yet one more way to do things (though even those in charge admit we’ll never be able to do some things we used to do without programming). <o:p></o:p></p><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal>So I’ve undertaken a series of small experiments, less than 100 but more than 20, in using CSS to animate SVG instead of SMIL. Sigh…. If we thought the last decade of struggling with inconsistent browser implementations of SVG was fun, oh goodie! More is in store! The situation looks horrible, in that DIFRENT way, that makes us relish the future!<o:p></o:p></p><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal>Is it just the particular experime
nts I have conducted, or have others noticed that cross browser consistency in CSS animation of SVG is much less, at present, than cross-browser consistency of SMIL animation of SVG? <o:p></o:p></p><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal>Of the myriad combinations of attributes and hierarchical nestings of <g><clipPath><pattern><filter><use><replicate><random><mask> and <path> here’s sort of an anecdotal* breakdown of this thing called progress:<o:p></o:p></p><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal><u>SVG + SMIL:<o:p></o:p></u></p><p class=MsoNormal>ASV viewer: 96%<o:p></o:p></p><p class=MsoNormal>Old Opera: 94%<o:p></o:p></p><p class=MsoNormal>Firefox: 92%<o:p></o:p></p><p class=MsoNo
rmal>Chrome: 90%<o:p></o:p></p><p class=MsoNormal>New Opera: 90%<o:p></o:p></p><p class=MsoNormal>Safari: 78.623%<br>Internet Explorer: 0%<o:p></o:p></p><p class=MsoNormal>---------------------<o:p></o:p></p><p class=MsoNormal>Average: 64.37%<o:p></o:p></p><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal><u>SVG + CSS animation<o:p></o:p></u></p><p class=MsoNormal>ASV viewer: N/A<o:p></o:p></p><p class=MsoNormal>Old Opera: 0%<o:p></o:p></p><p class=MsoNormal>Firefox: 88%<o:p></o:p></p><p class=MsoNormal>Chrome: 70%<o:p></o:p></p><p class=MsoNormal>New Opera: 70%<o:p></o:p></p><p class=MsoNormal>Safari: 78.623% (amazing coincidence)<br>Internet Explorer: 10%<o:p></o:p></p><p class=MsoNormal>----------------------<o:p></o:p></p><p class=MsoNormal>52.77%<o:p></o:p></p><p clas
s=MsoNormal><o:p> </o:p></p><p class=MsoNormal>Doesn’t it just make you want to learn all the new syntax?<o:p></o:p></p><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal>With enthusiastic solidarity for artists and authors everywhere,<o:p></o:p></p><p class=MsoNormal>David<o:p></o:p></p><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal>*anecdotal means purely anecdotal and impressionistic, though I have published hard objective data about cross-browser performance in the past. The above numbers are made up: “anecdotal and impressionistic” only!<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=66491/stime=1438629894" 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=X3oDMTJlazBydGF0BF9TAzk3MzU5NzE0BGdycElkAzEyOTg0MjEEZ3Jwc3BJZAMxNzA2MDMwMzkwBHNlYwN2dGwEc2xrA3ZnaHAEc3RpbWUDMTQzODYyOTg5NA--" 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=X3oDMTJkdjF2bWVlBF9TAzk3NDc2NTkwBGdycElkAzEyOTg0MjEEZ3Jwc3BJZAMxNzA2MDMwMzkwBHNlYwNmdHIEc2xrA2dmcARzdGltZQMxNDM4NjI5ODk0" 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_0019_01D0CE00.88BC5470--