OLD | NEW |
1 <html xmlns="http://www.w3.org/1999/xhtml"> | 1 <html xmlns="http://www.w3.org/1999/xhtml"> |
2 | 2 |
3 <!-- | 3 <!-- |
4 Verify that changing the SVG transform-origin presentation attribute works corre
ctly. | 4 Verify that changing the SVG transform-origin presentation attribute works corre
ctly. |
5 | 5 |
6 The green 100x100 rectangle should appear at 25,25. | 6 The green 100x100 rectangle should appear at 25,25. |
7 --> | 7 --> |
8 | 8 |
9 <body> | 9 <body> |
10 <svg xmlns="http://www.w3.org/2000/svg" style="position: absolute; top: 0px; l
eft: 0px;"> | 10 <svg xmlns="http://www.w3.org/2000/svg" style="position: absolute; top: 0px; l
eft: 0px;"> |
11 <rect id="rect" width="50px" height="50px" x="50" y="50" fill="green" tran
sform-origin="0 0" style="transform: scale(2, 2);"/> | 11 <rect id="rect" width="50px" height="50px" x="50" y="50" fill="green" transf
orm-origin="0 0" |
| 12 style="transform: scale(2, 2); transform-box: fill-box"/> |
12 </svg> | 13 </svg> |
13 | 14 |
14 <script><![CDATA[ | 15 <script><![CDATA[ |
15 | 16 |
16 document.getElementById('rect').setAttribute("transform-origin", "50% 50%"
) | 17 document.getElementById('rect').setAttribute("transform-origin", "50% 50%"
) |
17 | 18 |
18 ]]></script> | 19 ]]></script> |
19 </body> | 20 </body> |
20 </html> | 21 </html> |
OLD | NEW |