<
svg id="svg-root"
width="450"
height="450" xmlns="
http://www.w3.org/2000/svg" xmlns:xlink="
http://www.w3.org/1999/xlink" >
<
title id="test-title">coords-transforms-BE-02</
title>
<
desc id="test-desc">Validates elementary transforms and transformation nesting</
desc>
<
g id="test-body-content"
transform="translate(0, 30)">
<
g id="test-grid"
style="
stroke:#cccccc;
stroke-width:1;">
<
line x1="10"
y1="10.5"
x2="440"
y2="10.5"/>
<
line x1="10"
y1="20.5"
x2="440"
y2="20.5"/>
<
line x1="10"
y1="30.5"
x2="440"
y2="30.5"/>
<
line x1="10"
y1="40.5"
x2="440"
y2="40.5"/>
<
line x1="10"
y1="50.5"
x2="440"
y2="50.5"/>
<
line x1="10"
y1="60.5"
x2="440"
y2="60.5"/>
<
line x1="10"
y1="70.5"
x2="440"
y2="70.5"/>
<
line x1="10"
y1="80.5"
x2="440"
y2="80.5"/>
<
line x1="10"
y1="90.5"
x2="440"
y2="90.5"/>
<
line x1="10"
y1="100.5"
x2="440"
y2="100.5"/>
<
line x1="10"
y1="110.5"
x2="440"
y2="110.5"/>
<
line x1="10"
y1="120.5"
x2="440"
y2="120.5"/>
<
line x1="10"
y1="130.5"
x2="440"
y2="130.5"/>
<
line x1="10"
y1="140.5"
x2="440"
y2="140.5"/>
<
line x1="10"
y1="150.5"
x2="440"
y2="150.5"/>
<
line x1="10"
y1="160.5"
x2="440"
y2="160.5"/>
<
line x1="10"
y1="170.5"
x2="440"
y2="170.5"/>
<
line x1="10"
y1="180.5"
x2="440"
y2="180.5"/>
<
line x1="10"
y1="190.5"
x2="440"
y2="190.5"/>
<
line x1="10"
y1="200.5"
x2="440"
y2="200.5"/>
<
line x1="10"
y1="210.5"
x2="440"
y2="210.5"/>
<
line x1="10"
y1="220.5"
x2="440"
y2="220.5"/>
<
line x1="10"
y1="230.5"
x2="440"
y2="230.5"/>
<
line x1="10"
y1="240.5"
x2="440"
y2="240.5"/>
<
line x1="10"
y1="250.5"
x2="440"
y2="250.5"/>
<
line x1="10"
y1="260.5"
x2="440"
y2="260.5"/>
<
line x1="10"
y1="270.5"
x2="440"
y2="270.5"/>
<
line x1="10"
y1="280.5"
x2="440"
y2="280.5"/>
<
line x1="10"
y1="290.5"
x2="440"
y2="290.5"/>
<
line x1="10"
y1="300.5"
x2="440"
y2="300.5"/>
<
line x1="10"
y1="310.5"
x2="440"
y2="310.5"/>
<
line x1="10"
y1="320.5"
x2="440"
y2="320.5"/>
<
line x1="10"
y1="330.5"
x2="440"
y2="330.5"/>
<
line x1="10"
y1="340.5"
x2="440"
y2="340.5"/>
<
line y1="10"
x1="10.5"
y2="340"
x2="10.5"/>
<
line y1="10"
x1="20.5"
y2="340"
x2="20.5"/>
<
line y1="10"
x1="30.5"
y2="340"
x2="30.5"/>
<
line y1="10"
x1="40.5"
y2="340"
x2="40.5"/>
<
line y1="10"
x1="50.5"
y2="340"
x2="50.5"/>
<
line y1="10"
x1="60.5"
y2="340"
x2="60.5"/>
<
line y1="10"
x1="70.5"
y2="340"
x2="70.5"/>
<
line y1="10"
x1="80.5"
y2="340"
x2="80.5"/>
<
line y1="10"
x1="90.5"
y2="340"
x2="90.5"/>
<
line y1="10"
x1="100.5"
y2="340"
x2="100.5"/>
<
line y1="10"
x1="110.5"
y2="340"
x2="110.5"/>
<
line y1="10"
x1="120.5"
y2="340"
x2="120.5"/>
<
line y1="10"
x1="130.5"
y2="340"
x2="130.5"/>
<
line y1="10"
x1="140.5"
y2="340"
x2="140.5"/>
<
line y1="10"
x1="150.5"
y2="340"
x2="150.5"/>
<
line y1="10"
x1="160.5"
y2="340"
x2="160.5"/>
<
line y1="10"
x1="170.5"
y2="340"
x2="170.5"/>
<
line y1="10"
x1="180.5"
y2="340"
x2="180.5"/>
<
line y1="10"
x1="190.5"
y2="340"
x2="190.5"/>
<
line y1="10"
x1="200.5"
y2="340"
x2="200.5"/>
<
line y1="10"
x1="210.5"
y2="340"
x2="210.5"/>
<
line y1="10"
x1="220.5"
y2="340"
x2="220.5"/>
<
line y1="10"
x1="230.5"
y2="340"
x2="230.5"/>
<
line y1="10"
x1="240.5"
y2="340"
x2="240.5"/>
<
line y1="10"
x1="250.5"
y2="340"
x2="250.5"/>
<
line y1="10"
x1="260.5"
y2="340"
x2="260.5"/>
<
line y1="10"
x1="270.5"
y2="340"
x2="270.5"/>
<
line y1="10"
x1="280.5"
y2="340"
x2="280.5"/>
<
line y1="10"
x1="290.5"
y2="340"
x2="290.5"/>
<
line y1="10"
x1="300.5"
y2="340"
x2="300.5"/>
<
line y1="10"
x1="310.5"
y2="340"
x2="310.5"/>
<
line y1="10"
x1="320.5"
y2="340"
x2="320.5"/>
<
line y1="10"
x1="330.5"
y2="340"
x2="330.5"/>
<
line y1="10"
x1="340.5"
y2="340"
x2="340.5"/>
<
line y1="10"
x1="350.5"
y2="340"
x2="350.5"/>
<
line y1="10"
x1="360.5"
y2="340"
x2="360.5"/>
<
line y1="10"
x1="370.5"
y2="340"
x2="370.5"/>
<
line y1="10"
x1="380.5"
y2="340"
x2="380.5"/>
<
line y1="10"
x1="390.5"
y2="340"
x2="390.5"/>
<
line y1="10"
x1="400.5"
y2="340"
x2="400.5"/>
<
line y1="10"
x1="410.5"
y2="340"
x2="410.5"/>
<
line y1="10"
x1="420.5"
y2="340"
x2="420.5"/>
<
line y1="10"
x1="430.5"
y2="340"
x2="430.5"/>
<
line y1="10"
x1="440.5"
y2="340"
x2="440.5"/>
</
g>
<
g id="elementary-transforms-test"
transform="translate(0, 10)">
<
g id="elementary-transforms">
<
g transform="translate(50, 50)">
<
rect x="0"
y="0"
width="20"
height="2"
style="
fill:blue;"/>
<
rect x="0"
y="0"
width="2"
height="20"
style="
fill:red;"/>
</
g>
<
g transform="translate(150, 70) rotate(-90)">
<
rect x="0"
y="0"
width="20"
height="2"
style="
fill:blue;"/>
<
rect x="0"
y="0"
width="2"
height="20"
style="
fill:red;"/>
</
g>
<
g transform="translate(250, 50) skewX(45)">
<
rect x="0"
y="0"
width="20"
height="2"
style="
fill:blue;"/>
<
rect x="0"
y="0"
width="2"
height="20"
style="
fill:red;"/>
</
g>
<
g transform="translate(350, 50) skewY(45)">
<
rect x="0"
y="0"
width="20"
height="2"
style="
fill:blue;"/>
<
rect x="0"
y="0"
width="2"
height="20"
style="
fill:red;"/>
</
g>
<
g transform="translate(210, 120) scale(2)">
<
rect x="0"
y="0"
width="20"
height="1"
style="
fill:blue;"/>
<
rect x="0"
y="0"
width="1"
height="20"
style="
fill:red;"/>
</
g>
</
g>
<
g id="elementary-transforms-test-markers">
<
text x="40"
y="40">translate (50, 50)</
text>
<
rect x="48"
y="48"
width="5"
height="5"
style="
fill:black;"/>
<
rect x="68"
y="48"
width="5"
height="5"
style="
fill:blue;"/>
<
rect x="48"
y="68"
width="5"
height="5"
style="
fill:red;"/>
<
text x="140"
y="40">rotate(-90)</
text>
<
rect x="148"
y="68"
width="5"
height="5"
style="
fill:black;"/>
<
rect x="148"
y="48"
width="5"
height="5"
style="
fill:blue;"/>
<
rect x="168"
y="68"
width="5"
height="5"
style="
fill:red;"/>
<
text x="240"
y="40">skew x (45)</
text>
<
rect x="248"
y="48"
width="5"
height="5"
style="
fill:black;"/>
<
rect x="268"
y="48"
width="5"
height="5"
style="
fill:blue;"/>
<
rect x="268"
y="68"
width="5"
height="5"
style="
fill:red;"/>
<
text x="340"
y="40">skew y (45)</
text>
<
rect x="348"
y="48"
width="5"
height="5"
style="
fill:black;"/>
<
rect x="368"
y="68"
width="5"
height="5"
style="
fill:blue;"/>
<
rect x="348"
y="68"
width="5"
height="5"
style="
fill:red;"/>
<
text x="200"
y="110">scale (2)</
text>
<
rect x="208"
y="118"
width="5"
height="5"
style="
fill:black;"/>
<
rect x="248"
y="118"
width="5"
height="5"
style="
fill:blue;"/>
<
rect x="208"
y="158"
width="5"
height="5"
style="
fill:red;"/>
</
g>
</
g>
<
g id="nested-transforms-test">
<
g id="nested-transforms">
<
g transform="scale(3, 2) translate(16.666667, 105)">
<
rect x="0"
y="0"
width="20"
height="1"
style="
fill:blue;"/>
<
rect x="0"
y="0"
width="0.67"
height="20"
style="
fill:red;"/>
</
g>
<
g transform="translate(200, 0)">
<
g transform="scale(3, 2)">
<
g transform="translate(16.666667, 105)">
<
rect x="0"
y="0"
width="20"
height="1"
style="
fill:blue;"/>
<
rect x="0"
y="0"
width="0.67"
height="20"
style="
fill:red;"/>
</
g>
</
g>
</
g>
</
g>
<
g id="nested-transforms-test-markers">
<
text x="40"
y="200">scale(25, 95) and translate(2, 2)</
text>
<
rect x="48"
y="208"
width="5"
height="5"
style="
fill:black;"/>
<
rect x="108"
y="208"
width="5"
height="5"
style="
fill:blue;"/>
<
rect x="48"
y="248"
width="5"
height="5"
style="
fill:red;"/>
<
text x="240"
y="200">scale(25, 95) then translate(2, 2)</
text>
<
rect x="248"
y="208"
width="5"
height="5"
style="
fill:black;"/>
<
rect x="308"
y="208"
width="5"
height="5"
style="
fill:blue;"/>
<
rect x="248"
y="248"
width="5"
height="5"
style="
fill:red;"/>
</
g>
</
g>
</
g>
<
g id="test-legend"
style="
fill:black;
font-family:Helvetica;
font-size:10;">
<
rect x="10"
y="390"
width="275"
height="50"
style="
fill:none;
stroke:#000000;"/>
<
path style="
fill:none;
stroke:#000000;"