Home | History | Annotate | Download | only in animation
      1 <?xml version="1.0" encoding="UTF-8"?>
      2 <!--
      3 
      4 animateTransform parsing code coverage for translate, rotate, skewX
      5 
      6 TODO: does not test e/E exponent notation
      7 
      8 -->
      9 <svg xmlns="http://www.w3.org/2000/svg" width="800px" height="600px">
     10 	<g transform="translate(-90, -90)">
     11 		<circle fill="none" stroke="black" stroke-width="3" cx="200" cy="200" r="100" />
     12 		<line x1="200" y1="200" x2="300" y2="200" stroke="red" stroke-width="30" stroke-linecap="round">
     13 			<animateTransform attributeName="transform" type="rotate" from=" 0, 200, 200" to=" 360, 200, 200"
     14 				dur="5s" />
     15 		</line>
     16 		<line x1="200" y1="200" x2="300" y2="200" stroke="green" stroke-width="20" stroke-linecap="round">
     17 			<animateTransform attributeName="transform" type="rotate" from=" 0 200 200" to=" 360 200 200"
     18 				dur="5s" />
     19 		</line>
     20 		<line x1="200" y1="200" x2="300" y2="200" stroke="blue" stroke-width="10" stroke-linecap="round">
     21 			<animateTransform attributeName="transform" type="rotate" from=" 0,200,200" to=" 360,200,200"
     22 				dur="5s" />
     23 		</line>
     24 		<line x1="200" y1="200" x2="300" y2="200" stroke="white" stroke-width="5" stroke-linecap="round">
     25 			<animateTransform attributeName="transform" type="rotate" from=" 0,+200 +200" to=" 360 +200 +200"
     26 				dur="5s" />
     27 		</line>
     28 	</g>
     29 	<g transform="translate(300, 10)">
     30 		<rect fill="none" stroke="black" stroke-width="3" x="0" y="0" width="200" height="200" />
     31 		<circle fill="red" cx="0" cy="0" r="30">
     32 			<animateTransform attributeName="transform" type="translate" from="0, 0" to="200, 200" dur="5s" />
     33 		</circle>
     34 		<circle fill="green" cx="0" cy="0" r="20">
     35 			<animateTransform attributeName="transform" type="translate" from="0 0" to="200 200" dur="5s" />
     36 		</circle>
     37 		<circle fill="blue" cx="0" cy="0" r="10">
     38 			<animateTransform attributeName="transform" type="translate" from="0,0" to="200,200" dur="5s" />
     39 		</circle>
     40 		<circle fill="yellow" cx="0" cy="0" r="5">
     41 			<animateTransform attributeName="transform" type="translate" from=" +0,+0" to=" +200 +200" dur="5s" />
     42 		</circle>
     43 	</g>
     44 	<g transform="translate(10, 300)">
     45 		<rect fill="none" stroke="black" stroke-width="3" x="0" y="0" width="200" height="200" />
     46 		<rect fill="red" x="0" y="0" width="40" height="100">
     47 			<animateTransform attributeName="transform" type="scale" from="1,1" by="0,1" dur="5s" />
     48 		</rect>
     49 		<rect fill="green" x="0" y="0" width="30" height="100">
     50 			<animateTransform attributeName="transform" type="scale" from="1 1" by="0 1" dur="5s" />
     51 		</rect>
     52 		<rect fill="blue" x="0" y="0" width="20" height="100">
     53 			<animateTransform attributeName="transform" type="scale" from="1, 1" by="0, 1" dur="5s" />
     54 		</rect>
     55 		<rect fill="yellow" x="0" y="0" width="10" height="100">
     56 			<animateTransform attributeName="transform" type="scale" from="+1,+1" by=" +0, +1" dur="5s" />
     57 		</rect>
     58 
     59 		<rect fill="red" x="0" y="0" width="100" height="40">
     60 			<animateTransform attributeName="transform" type="scale" from="1,1" by="1,0" dur="5s" />
     61 		</rect>
     62 		<rect fill="green" x="0" y="0" width="100" height="30">
     63 			<animateTransform attributeName="transform" type="scale" from="1 1" by="1 0" dur="5s" />
     64 		</rect>
     65 		<rect fill="blue" x="0" y="0" width="100" height="20">
     66 			<animateTransform attributeName="transform" type="scale" from="1, 1" by="1, 0" dur="5s" />
     67 		</rect>
     68 		<rect fill="yellow" x="0" y="0" width="100" height="10">
     69 			<animateTransform attributeName="transform" type="scale" from="+1,+1" by=" +1, +0" dur="5s" />
     70 		</rect>
     71 	</g>
     72 
     73 	<g transform="translate(300, 300)">
     74 		<rect fill="none" stroke="black" stroke-width="3" x="0" y="0" width="200" height="200" />
     75 		<rect fill="red" x="0" y="0" width="100" height="100">
     76 			<animateTransform attributeName="transform" type="skewX" from="0" by="45" dur="5s" />
     77 		</rect>
     78 		<rect fill="green" x="0" y="0" width="50" height="100">
     79 			<animateTransform attributeName="transform" type="skewX" from="0" by=" 45" dur="5s" />
     80 		</rect>
     81 		<rect fill="blue" x="0" y="0" width="25" height="100">
     82 			<animateTransform attributeName="transform" type="skewX" from="0" by=" +45.0" dur="5s" />
     83 		</rect>
     84 	</g>
     85 </svg>
     86 
     87