Return to viewport-transform.xml CVS log | Up to [ELWIX - Embedded LightWeight unIX -] / embedaddon / libxml2 / result / SVG |
1.1 ! misho 1: <?xml version="1.0" standalone="no"?> ! 2: <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG April 1999//EN" "http://www.w3.org/Graphics/SVG/svg-19990412.dtd"> ! 3: <svg width="300px" height="3oopx"> ! 4: <desc>Transformation with establishment of a new viewport ! 5: </desc> ! 6: <!-- The following two text elements will both draw with a ! 7: font height of 12 pixels --> ! 8: <text style="font-size: 12">This prints 12 pixels high.</text> ! 9: <text style="font-size: 12px">This prints 12 pixels high.</text> ! 10: <!-- Now scale the coordinate system by 2. --> ! 11: <g style="transform: scale(2)"> ! 12: <!-- The following text will actually draw 24 pixels high ! 13: because each unit in the new coordinate system equals ! 14: 2 units in the previous coordinate system. --> ! 15: <text style="font-size: 12">This prints 24 pixels high.</text> ! 16: <!-- The following text will actually still draw 12 pixels high ! 17: because the CSS unit specifier has been provided. --> ! 18: <text style="font-size: 12px">This prints 12 pixels high.</text> ! 19: </g> ! 20: <!-- This time, scale the coordinate system by 3. --> ! 21: <g style="transform: scale(3)"> ! 22: <!-- Establish a new viewport and thus change the meaning of ! 23: some CSS unit specifiers. --> ! 24: <svg style="left:0; top:0; right:100; bottom:100" width="100%" height="100%"> ! 25: <!-- The following two text elements will both draw with a ! 26: font height of 36 screen pixels. The first text element ! 27: defines its height in user coordinates, which have been ! 28: scaled by 3. The second text element defines its height ! 29: in CSS px units, which have been redefined to be three times ! 30: as big as screen pixels due the <svg> element establishing ! 31: a new viewport. --> ! 32: <text style="font-size: 12">This prints 36 pixels high.</text> ! 33: <text style="font-size: 12px">This prints 36 pixels high.</text> ! 34: </svg> ! 35: </g> ! 36: </svg>