Bücher online kostenlos Kostenlos Online Lesen
HTML5-Handbuch - die neuen Features von HTML5

HTML5-Handbuch - die neuen Features von HTML5

Titel: HTML5-Handbuch - die neuen Features von HTML5 Kostenlos Bücher Online Lesen
Autoren: Franzis
Vom Netzwerk:
ein großes Info-Symbol.
    Bild 7.3: So sollte das Info-Symbol aussehen, wenn der Browser die SVG-Grafik anzeigt.
Weitere Hinweise
    Halten Sie innerhalb von

und

die Syntax-Regeln von XML-Dokumenten ein. Dazu gehören beispielsweise die Unterscheidung von Groß- und Kleinschreibung und die Notation von Standalone-Elementen wie bei

.
SVG in XHTML
    Sie können in XHTML über das XML-Namensraumkonzept einen Bereich definieren, in dem eine vollständige SVG-Grafik notiert ist. Ein Browser muss, um dies zu verarbeiten, über einen XML-Parser verfügen, und das XHTML-Dokument muss vom Webserver als XML-Dokument ausgeliefert werden.
Beispiel
    
        xml:lang="de">
    
    Information
    
    
    

Informationsecke


    
    
    
        "Arial,sans-serif" font-size="15">NFORMATION
    
    
    
    
Erläuterung
    Es handelt sich um das gleiche Beispiel wie weiter oben. Der Unterschied zum Einbetten in HTML besteht darin, dass das gesamte Dokument mit einer XML-Deklaration beginnt, die sich an XML-Parser richtet. Sowohl das einleitende

-Tag als auch das einleitende

-Tag enthalten mit dem
xmlns
-Attribut eine eindeutige Namensraum-Deklaration, die es dem XML-Parser ermöglicht, die beiden Sprachen auseinanderzuhalten.
Referenzinformationen

7.2.3      Basisfunktionen von SVG
    Einfache SVG-Grafiken, zum Beispiel Balkengrafiken für statistische Verteilungen, lassen sich mit ein paar Grundkenntnissen auch ohne Grafikeditor direkt erzeugen.Deshalb sollen die wichtigsten Gestaltungsfunktionen von SVG hier kurz vorgestellt werden.
Formen zeichnen
    Mit SVG können Sie Rechtecke, Kreise, Ellipsen, Polygone (z. B. für Dreiecke, Vielecke, Sterne), Linien, Polylinien (Zickzack-Linien) und Pfade (z. B. für Bézier-Kurven) erstellen. Gezeigt werden hier die ersten fünf dieser Grundformen.
Beispiel
    
    
    
    
    
        stroke-width="3" />
        stroke-width="3"/>
    
    Bild 7.4: Einfache Formen in SVG
Erläuterung
    Alle Elemente für geometrische Grundformen werden in Form von Standalone-Tags notiert, haben also keinen Elementinhalt. Wenn sich Formen auf Grund ihrer Position und Größe überdecken, überdecken später notierte Formen früher notierte. Durch einfaches Umstellen der Reihenfolge können Sie die Überdeckung also beeinflussen.
Rechteck
    Mit

markieren Sie ein Rechteck. Das
x
-Attribut gibt den Horizontalversatz der linken oberen Ecke des Rechtecks an. Das
y
-Attribut gibt den Vertikalversatz der linken oberen Ecke des Rechtecks an. Das
width
-Attribut gibt die Breite des Rechtecks an. Das
height
-Attribut gibt die Höhe des Rechtecks an. Wenn das Rechteck abgerundete Ecken haben soll, können Sie mit dem
rx
-Attribut die horizontale Abrundung undmit dem
ry
-Attribut die vertikale Abrundung bestimmen. Wenn das Rechteck scharfe Ecken haben soll, lassen Sie die Attribute
rx
und
ry
einfach weg.
Kreis
    Mit

markieren Sie einen Kreis. Das
cx
-Attribut gibt den Horizontalversatz des Kreismittelpunktes an. Das
cy
-Attribut gibt den Vertikalversatz des Kreismittelpunktes an. Das
r
-Attribut gibt die Größe des Radius an.
Ellipse
    Mit

markieren Sie eine Ellipse. Das
cx
-Attribut gibt den Horizontalversatz des Ellipsenmittelpunktes an. Das
cy
-Attribut gibt den Vertikalversatz des Ellipsenmittelpunktes an. Das
rx
-Attribut gibt den horizontalen Radius bzw. die halbe Maximalbreite der Ellipse an. Das
ry
-Attribut gibt den vertikalen Radius bzw. die halbe Maximalhöhe der Ellipse an.
Polygon
    Mit

markieren Sie ein Polygon (Vieleck). Das
points
-Attribut definiert die Eckpunkte des Polygons. Die Wertzuweisung besteht aus beliebig vielen Eckpunktdefinitionen, welche durch Leerzeichen getrennt werden. Jede Definition besteht aus zwei Werten, die durch ein

Weitere Kostenlose Bücher