blob: 4168f058469e4dcc09f58cd065067c7ee9e7b553 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
<?xml version="1.0" standalone="yes"?>
<svg:svg width="300px" height="300px" xmlns:svg="http://www.w3.org/TR/2000/CR-SVG-20000802/DTD/svg-20000802.dtd">
<svg:title>Redefining CSS Units</svg:title>
<svg:desc>Transformation with establishment of a new viewport
</svg:desc>
<!-- The following two text elements will both draw with a
font height of 12 pixels -->
<svg:text x="30" y="20" style="font-size: 12">This prints 12 pixels high.</svg:text>
<svg:text x="30" y="40" style="font-size: 12px">This prints 12 pixels high.</svg:text>
<!-- Now scale the coordinate system by 2. -->
<svg:g 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. -->
<svg:text x="15" y="40" style="font-size: 12">This prints 24 pixels high.</svg:text>
<!-- The following text will actually still draw 12 pixels high
because the CSS unit specifier has been provided. -->
<svg:text x="15" y="50" style="font-size: 12px">This prints 12 pixels high.</svg:text>
</svg:g>
<!-- This time, scale the coordinate system by 3. -->
<svg:g transform="scale(3)">
<!-- Establish a new viewport and thus change the meaning of
some CSS unit specifiers. -->
<svg: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. -->
<svg:text x="10" y="50" style="font-size: 12">This prints 36 pixels high.</svg:text>
<svg:text x="10" y="70" style="font-size: 12px">This prints 36 pixels high.</svg:text>
</svg:svg>
</svg:g>
</svg:svg>
|
