OLD | NEW |
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" | 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" |
2 "http://www.w3.org/TR/html4/loose.dtd"> | 2 "http://www.w3.org/TR/html4/loose.dtd"> |
3 | 3 |
4 <html lang="en"> | 4 <html lang="en"> |
5 <head> | 5 <head> |
6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | 6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> |
7 <title>SVG Animation of elements transformed using -webkit-transform</title> | 7 <title>SVG Animation of elements transformed using -webkit-transform</title> |
8 </head> | 8 </head> |
9 <body> | 9 <body> |
10 <h1>SVG Animation of SVG element rotated using '-webkit-transform'</h1> | 10 <h1>SVG Animation of SVG element rotated using '-webkit-transform'</h1> |
11 | 11 |
12 <p>The rotated rect should from 0,0 to 100,0 over 3 seconds.</p> | 12 <p>The rotated rect should from 0,0 to 100,0 over 3 seconds.</p> |
13 | 13 |
14 <svg xmlns='http://www.w3.org/2000/svg'> | 14 <svg xmlns='http://www.w3.org/2000/svg'> |
15 <rect id="target" width='100' height='100' stroke="blue" fill="none" style="
-webkit-transform: rotate(45deg)"> | 15 <rect id="target" width='100' height='100' stroke="blue" fill="none" style="
transform: rotate(45deg)"> |
16 <animateMotion to='100,0' dur='3s' /> | 16 <animateMotion to='100,0' dur='3s' /> |
17 </rect> | 17 </rect> |
18 </svg> | 18 </svg> |
19 </body> | 19 </body> |
20 </html> | 20 </html> |
OLD | NEW |