You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
47 lines
2.0 KiB
47 lines
2.0 KiB
4 months ago
|
<?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>
|