SVG – Learning by Coding
1:
<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
2:
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
3:
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd" [
4:
<!ATTLIST svg xmlns:xlink CDATA #FIXED "http://www.w3.org/1999/xlink">
5:
]>
6: 7:
<!-- SVG - Learning by Coding - http://www.datenverdrahten.de/svglbc/ -->
8:
<!-- Author: Dr. Thomas Meinike 02/03 - thomas@handmadecode.de -->
9: 10:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
11: 12:
<title>SVG - Learning by Coding</title>
13:
<desc>SVG-Spezifikation in Beispielen</desc>
14: 15:
<defs>
16: 17:
<style type="text/css">
18:
<![CDATA[
19: 20:
text
21:
{
22:
font-size: 18px;
23:
fill: #333;
24:
}
25: 26:
tspan
27:
{
28:
font-size: 18px;
29:
fill: #00C;
30:
}
31: 32:
tspan.tief
33:
{
34:
font-size: 12px;
35:
baseline-shift: -5px;
36:
fill: orange;
37:
}
38: 39:
tspan.hoch
40:
{
41:
font-size: 12px;
42:
baseline-shift: 10px;
43:
fill: orange;
44:
}
45: 46:
]]>
47:
</style>
48: 49:
</defs>
50: 51:
<text x="20" y="30" style="fill: #000; font-size: 24px">
52:
Eigenschaft baseline-shift
53:
</text>
54: 55:
<line x1="20" y1="100" x2="320" y2="100"/>
56: 57:
<text x="30" y="100">
58:
baseline-shift:
59:
<tspan style="baseline-shift: 20px">20px</tspan>
60:
<tspan style="baseline-shift: super">super</tspan>
61:
<tspan style="baseline-shift: sub">sub</tspan>
62:
<tspan style="baseline-shift: -20px">-20px</tspan>
63:
</text>
64: 65:
<text x="30" y="180" style="fill: orange; font-weight: bold">
66:
Das Dichromat-Ion: Cr<tspan class="tief">2</tspan>O<tspan
67:
class="tief">7</tspan><tspan class="hoch">2-</tspan>
68:
</text>
69: 70:
</svg>
[zum Anfang]
