49 lines
1.7 KiB
XML
49 lines
1.7 KiB
XML
<?xml version="1.0" encoding="utf-8"?>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="600" height="600">
|
|
<defs>
|
|
<linearGradient id="horizontal" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="1" y2="0">
|
|
<stop stop-color="lime" offset="0.0"/>
|
|
<stop stop-color="lime" offset="0.5"/>
|
|
<stop stop-color="blue" offset="0.5"/>
|
|
<stop stop-color="blue" offset="1.0"/>
|
|
</linearGradient>
|
|
|
|
<linearGradient id="vertical" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="0" y2="1">
|
|
<stop stop-color="lime" offset="0.0"/>
|
|
<stop stop-color="lime" offset="0.5"/>
|
|
<stop stop-color="blue" offset="0.5"/>
|
|
<stop stop-color="blue" offset="1.0"/>
|
|
</linearGradient>
|
|
</defs>
|
|
|
|
<rect x="0" y="0" width="100%" height="100%" fill="white"/>
|
|
|
|
<style type="text/css">
|
|
text {
|
|
font: 50px Ahem;
|
|
}
|
|
</style>
|
|
|
|
<!-- Test that the bounding box of <text> is correct by creating groups of two squares,
|
|
one green and one blue. The gradients use objectBoundingBox, so they fill both
|
|
squares at the same time.
|
|
|
|
The first test is horizontal, to test the horizontal bounds.
|
|
|
|
The second test is vertical, to test the vertical bounds.
|
|
-->
|
|
|
|
<text id="a" x="50" y="100" fill="url(#horizontal)" stroke-width="2">XX</text>
|
|
<text id="b" x="0" y="-10" fill="url(#horizontal)" transform="translate(200, 60) rotate(90)">XX</text>
|
|
|
|
<text id="c" fill="url(#vertical)">
|
|
<tspan x="300" y="100">X</tspan>
|
|
<tspan x="300" y="150">X</tspan>
|
|
</text>
|
|
|
|
<text id="d" fill="url(#vertical)" transform="translate(490, 110) rotate(-90)">
|
|
<tspan x="0" y="-50">X</tspan>
|
|
<tspan x="0" y="0">X</tspan>
|
|
</text>
|
|
</svg>
|