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]
