SVG – Learning by Coding

[ flowtext.svg --> Grafik anzeigen ]

  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: <!--    AuthorDrThomas 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-familysans-serif;
 30:       font-size12px;
 31:     }
 32: 
 33:     /* Absatzformatierung */
 34: 
 35:     flow
 36:     {
 37:       fill#00C;
 38:       font-size14px;
 39:       text-alignleft;
 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>&#160;</flowPara>
 74: 
 75:       <flowPara>
 76:         Der Adobe SVG Viewer 6.0 (Preview 1ermöglicht als Vorgriff auf die
 77:         SVG-Spezifikation 1.2 den Umgang mit Fließtext.
 78:       </flowPara>
 79: 
 80:       <flowPara>&#160;</flowPara>
 81: 
 82:       <flowPara>
 83:         Zum Einsatz kommen die Elemente flowflowRegionregionflowDiv und flowPara.
 84:         flow umschließt den gesamten Textblockwährend flowRegion die Zuweisung einer
 85:         Region (Kindelement regionzulässtdhder Text kann über eine SVG-Grundform
 86:         (hier ein Rechteckverteilt werden.
 87:       </flowPara>
 88: 
 89:       <flowPara>&#160;</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]