diff options
Diffstat (limited to 'docs/examples/svg/test/newCSSUnits.svg')
| -rw-r--r-- | docs/examples/svg/test/newCSSUnits.svg | 41 |
1 files changed, 41 insertions, 0 deletions
diff --git a/docs/examples/svg/test/newCSSUnits.svg b/docs/examples/svg/test/newCSSUnits.svg new file mode 100644 index 000000000..80e1769c5 --- /dev/null +++ b/docs/examples/svg/test/newCSSUnits.svg @@ -0,0 +1,41 @@ +<?xml version="1.0" standalone="yes"?> + +<svg:svg width="300px" height="300px" xmlns:svg="http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-stylable.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>
\ No newline at end of file |