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>
FreeBSD-CVSweb <freebsd-cvsweb@FreeBSD.org>