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: <!ENTITY % svgExt "|flow">
6: <!ELEMENT flow (flowRegion,flowDiv)>
7: <!ELEMENT flowRegion (region)>
8: <!ELEMENT flowDiv (flowPara*)>
9: <!ELEMENT flowPara (#PCDATA)>
10: <!ELEMENT region EMPTY>
11: <!ATTLIST region xlink:href CDATA #REQUIRED>
12: ]>
13:
14: <!-- SVG - Learning by Coding - http://www.datenverdrahten.de/svglbc/ -->
15: <!-- Author: Dr. Thomas Meinike 07/03 - thomas@handmadecode.de -->
16:
17: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
18:
19: <title>SVG - Learning by Coding</title>
20: <desc>SVG-Spezifikation in Beispielen</desc>
21:
22: <defs>
23:
24: <style type="text/css">
25: <![CDATA[
26:
27: *
28: {
29: font-family: sans-serif;
30: font-size: 12px;
31: }
32:
33: /* Absatzformatierung */
34:
35: flow
36: {
37: fill: #00C;
38: font-size: 14px;
39: text-align: left;
40: }
41:
42: ]]>
43: </style>
44:
45: <!-- Rechteck fuer den Textbereich als Referenz -->
46: <rect id="textbox" x="25" y="65" width="400" height="220"/>
47:
48: </defs>
49:
50: <text x="20" y="30" style="fill: #000; font-size: 24px">
51: Fließtext (ASV 6.0 wird benötigt)
52: </text>
53: <text x="20" y="50">[sonst bleibt das Rechteck leer]</text>
54: <a xlink:href="bilder/flowtext.gif" target="svgbox">
55: <text x="215" y="50" style="fill: #F00">Ergebnis als Rastergrafik ...
56: <set attributeName="fill" attributeType="CSS" to="#00C" begin="mouseover"/>
57: <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseout"/>
58: </text>
59: </a>
60:
61: <!-- sichtbares Rechteck -->
62: <rect x="20" y="70" width="410" height="225" style="fill: #FFC; stroke: #F00"/>
63:
64: <!-- Fließtext-Bereich -->
65: <flow>
66:
67: <flowRegion>
68: <region xlink:href="#textbox"/>
69: </flowRegion>
70:
71: <flowDiv>
72:
73: <flowPara> </flowPara>
74:
75: <flowPara>
76: Der Adobe SVG Viewer 6.0 (Preview 1) ermöglicht als Vorgriff auf die
77: SVG-Spezifikation 1.2 den Umgang mit Fließtext.
78: </flowPara>
79:
80: <flowPara> </flowPara>
81:
82: <flowPara>
83: Zum Einsatz kommen die Elemente flow, flowRegion, region, flowDiv und flowPara.
84: flow umschließt den gesamten Textblock, während flowRegion die Zuweisung einer
85: Region (Kindelement region) zulässt, d. h. der Text kann über eine SVG-Grundform
86: (hier ein Rechteck) verteilt werden.
87: </flowPara>
88:
89: <flowPara> </flowPara>
90:
91: <flowPara>
92: Der eigentliche Text wird unterhalb von flowDiv auf Absätze aufgeteilt.
93: Das Analogon zum (X)HTML-Element p bildet das SVG-Element flowPara.
94: </flowPara>
95:
96: </flowDiv>
97:
98: </flow>
99:
100: </svg>
[zum Anfang]