Mercurial > hg > svg2 / changeset
summary | shortlog | changelog | graph | tags | bookmarks | branches | files | changeset
Transform keySpline graphs into SVGs for SVG Animate.
authorDirk Schulze <dschulze@adobe.com>
Sat, 26 May 2012 16:49:38 -0700
changeset 166 60e29b32e047
parent 165 867fcada1792
child 167 467d465f148c
Transform keySpline graphs into SVGs for SVG Animate.
master/animate.html
master/images/animate/keySplines01.svg
master/images/animate/keySplines02.svg
master/images/animate/keySplines03.svg
master/images/animate/keySplines04.svg 
--- a/master/animate.html	Sat May 26 10:04:08 2012 -0700
+++ b/master/animate.html	Sat May 26 16:49:38 2012 -0700
@@ -1232,34 +1232,29 @@
       href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#TimingAndRealWorldClockTime">
       Timing and real-world clock times</a>.</p>
       <div class="example">
-      <table summary="examples of keySplines">
+      <table summary="examples of keySplines" style="border-collapse:separate; border-spacing: 20px;">
         <caption align="bottom">
           Examples of <span class="attr-name">keySplines</span>
         </caption>
         <tr>
-          <td width="10">&nbsp;</td>
-          <td width="172"><img width="172" height="174"
+          <td width="250"><img class="bordered" width="250" height="250"
           alt="Example keySplines01 - keySplines of 0 0 1 1 (the default)"
-           src="images/animate/keySplines01.png" /> <span
+           src="images/animate/keySplines01.svg" /> <span
           class="table-heading-1">keySplines="0&nbsp;0&nbsp;1&nbsp;1"
           (the default)</span></td>
-          <td width="20">&nbsp;</td>
-          <td width="172"><img width="172" height="174"
+          <td width="250"><img class="bordered" width="250" height="250"
           alt="Example keySplines01 - keySplines of .5 0 .5 1"
-          src="images/animate/keySplines02.png" /> <span
-          class="table-heading-1">keySplines=".5&nbsp;0&nbsp;.5&nbsp;1"<br />
-           &nbsp;</span></td>
+          src="images/animate/keySplines02.svg" /> <span
+          class="table-heading-1">keySplines=".5&nbsp;0&nbsp;.5&nbsp;1"</span></td>
         </tr>
         <tr>
-          <td width="10">&nbsp;</td>
-          <td width="172"><img width="172" height="174"
+          <td width="250"><img class="bordered" width="250" height="250"
           alt="Example keySplines01 - keySplines of 0 .75 .25 1"
-          src="images/animate/keySplines03.png" /> <span
+          src="images/animate/keySplines03.svg" /> <span
           class="table-heading-1">keySplines="0&nbsp;.75&nbsp;.25&nbsp;1"</span></td>
-          <td width="20">&nbsp;</td>
-          <td width="172"><img width="172" height="174"
+          <td width="250"><img class="bordered" width="250" height="250"
           alt="Example keySplines01 - keySplines of 1 0 .25 .25"
-          src="images/animate/keySplines04.png" /> <span
+          src="images/animate/keySplines04.svg" /><span
           class="table-heading-1">keySplines="1&nbsp;0&nbsp;.25&nbsp;.25"</span></td>
         </tr>
       </table>
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/animate/keySplines01.svg	Sat May 26 16:49:38 2012 -0700
@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-15 -15 130 130" width="250" height="250">
+  <rect width="100" height="100" fill="none" stroke="black" />
+
+  <path d="M0,100 L100,0" fill="none" stroke="blue" stroke-width="2" />
+  
+  <circle cx="100" cy="0" r="2.3" fill="red" />
+  <circle cx="0" cy="100" r="2.3" fill="red" />
+  
+  <circle cx="25" cy="75" r="2.3" fill="blue" />
+  <circle cx="50" cy="50" r="2.3" fill="blue" />
+  <circle cx="75" cy="25" r="2.3" fill="blue" />
+  
+  <text x="-10" y="109" fill="red" font-size="9">(0,0)</text>
+  <text x="90" y="-4" fill="red" font-size="9">(1,1)</text>
+</svg>
\ No newline at end of file
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/animate/keySplines02.svg	Sat May 26 16:49:38 2012 -0700
@@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-15 -15 130 130" width="250" height="250">
+  <rect width="100" height="100" fill="none" stroke="black" />
+  
+  <line x1="50" y1="100" x2="0" y2="100" stroke="red" stroke-width="2" />
+  <line x1="50" y1="0" x2="100" y2="0" stroke="red" stroke-width="2" />
+
+  <path d="M0,100 C50,100 50,0 100,0" fill="none" stroke="blue" stroke-width="2" />
+
+  <circle cx="0" cy="100" r="2.3" fill="black" />
+  <circle cx="100" cy="0" r="2.3" fill="black" />
+  
+  <circle cx="50" cy="0" r="2.3" fill="red" />
+  <circle cx="50" cy="100" r="2.3" fill="red" />
+  
+  <circle cx="25" cy="90" r="2.3" fill="blue" />
+  <circle cx="50" cy="50" r="2.3" fill="blue" />
+  <circle cx="75" cy="10" r="2.3" fill="blue" />
+  
+  <text x="40" y="109" fill="red" font-size="9">(0.5,0)</text>
+  <text x="40" y="-4" fill="red" font-size="9">(0.5,1)</text>
+  
+  <text x="-10" y="109" font-size="9">(0,0)</text>
+  <text x="90" y="-4" font-size="9">(1,1)</text>
+</svg>
\ No newline at end of file
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/animate/keySplines03.svg	Sat May 26 16:49:38 2012 -0700
@@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-15 -15 130 130" width="250" height="250">
+  <rect width="100" height="100" fill="none" stroke="black" />
+  
+  <line x1="0" y1="100" x2="0" y2="25" stroke="red" stroke-width="2" />
+  <line x1="100" y1="0" x2="25" y2="0" stroke="red" stroke-width="2" />
+
+  <path d="M0,100 C0,25 25,0 100,0" fill="none" stroke="blue" stroke-width="2" />
+
+  <circle cx="0" cy="100" r="2.3" fill="black" />
+  <circle cx="100" cy="0" r="2.3" fill="black" />
+  
+  <circle cx="0" cy="25" r="2.3" fill="red" />
+  <circle cx="25" cy="0" r="2.3" fill="red" />
+  
+  <circle cx="25" cy="19" r="2.3" fill="blue" />
+  <circle cx="50" cy="6.1" r="2.3" fill="blue" />
+  <circle cx="75" cy="1.5" r="2.3" fill="blue" />
+  
+  <text x="-10" y="20" fill="red" font-size="9">(0,.75)</text>
+  <text x="7" y="-4" fill="red" font-size="9">(0.25,1)</text>
+  
+  <text x="-10" y="109" font-size="9">(0,0)</text>
+  <text x="90" y="-4" font-size="9">(1,1)</text>
+</svg>
\ No newline at end of file
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/animate/keySplines04.svg	Sat May 26 16:49:38 2012 -0700
@@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-15 -15 130 130" width="250" height="250">
+  <rect width="100" height="100" fill="none" stroke="black" />
+  
+  <line x1="0" y1="100" x2="100" y2="100" stroke="red" stroke-width="2" />
+  <line x1="100" y1="0" x2="25" y2="75" stroke="red" stroke-width="2" />
+
+  <path d="M0,100 C100,100 25,75 100,0" fill="none" stroke="blue" stroke-width="2" />
+
+  <circle cx="0" cy="100" r="2.3" fill="black" />
+  <circle cx="100" cy="0" r="2.3" fill="black" />
+  
+  <circle cx="100" cy="100" r="2.3" fill="red" />
+  <circle cx="25" cy="75" r="2.3" fill="red" />
+  
+  <circle cx="25" cy="99" r="2.3" fill="blue" />
+  <circle cx="50" cy="93.5" r="2.3" fill="blue" />
+  <circle cx="75" cy="31" r="2.3" fill="blue" />
+  
+  <text x="90" y="109" fill="red" font-size="9">(1,0)</text>
+  <text x="2" y="60" fill="red" font-size="9">(.25,.25)</text>
+  
+  <text x="-10" y="109" font-size="9">(0,0)</text>
+  <text x="90" y="-4" font-size="9">(1,1)</text>
+</svg>
\ No newline at end of file
svg2

Hosted by W3C Systems Team, please report bugs to sysreq@w3.org