| <?xml version="1.0" standalone="no"?> | |
| <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG April 1999//EN" | |
| "http://www.w3.org/Graphics/SVG/svg-19990412.dtd"> | |
| <svg width="300px" height="3oopx"> | |
| <desc>Transformation with establishment of a new viewport | |
| </desc> | |
| <!-- The following two text elements will both draw with a | |
| font height of 12 pixels --> | |
| <text style="font-size: 12">This prints 12 pixels high.</text> | |
| <text style="font-size: 12px">This prints 12 pixels high.</text> | |
| <!-- Now scale the coordinate system by 2. --> | |
| <g style="transform: scale(2)"> | |
| <!-- The following text will actually draw 24 pixels high | |
| because each unit in the new coordinate system equals | |
| 2 units in the previous coordinate system. --> | |
| <text style="font-size: 12">This prints 24 pixels high.</text> | |
| <!-- The following text will actually still draw 12 pixels high | |
| because the CSS unit specifier has been provided. --> | |
| <text style="font-size: 12px">This prints 12 pixels high.</text> | |
| </g> | |
| <!-- This time, scale the coordinate system by 3. --> | |
| <g style="transform: scale(3)"> | |
| <!-- Establish a new viewport and thus change the meaning of | |
| some CSS unit specifiers. --> | |
| <svg style="left:0; top:0; right:100; bottom:100" | |
| width="100%" height="100%"> | |
| <!-- The following two text elements will both draw with a | |
| font height of 36 screen pixels. The first text element | |
| defines its height in user coordinates, which have been | |
| scaled by 3. The second text element defines its height | |
| in CSS px units, which have been redefined to be three times | |
| as big as screen pixels due the <svg> element establishing | |
| a new viewport. --> | |
| <text style="font-size: 12">This prints 36 pixels high.</text> | |
| <text style="font-size: 12px">This prints 36 pixels high.</text> | |
| </svg> | |
| </g> | |
| </svg> |