SVG auf bemeup

30. Januar 2015

Vor nunmehr gut 14 Jahren veröffentlichte das W3C (World Wide Web Consortium) erstmal im September 2001 eine Spezifikation für skalierbare Vektorgrafiken zur Beschreibung zweidimensionaler Vektorgrafiken. SVG [Scalable Vector Graphics] basieren auf XML und lassen sich heute quasi nativ in allen modernen Browsern darstellen.
SVG lässt sich in den Browsern mittels SMIL animieren und auch die Manipulation des SVG-DOM mit Hilfe von Skriptsprachen (vorrangig Javascript) ist möglich. Dazu später mehr...

Was ist bzw. war meine Motivation dir hier etwas über SVG zu vermitteln?

Leider führt SVG im Augenblick noch ein Schattendasein aber es sind zunehmend mehr Seiten im Netz mit SVG-Inhalten zu finden und ich denke, es werden in Zukunft immer mehr Menschen auf diese Art der grafischen Darstellung zurückgreifen.
Aber genug der vielen Worte! Lasst uns einfach anfangen und die Möglichkeiten der skalierbaren Vektorgrafiken erkunden.

In der Navigation am oberen Bildschirmrand findest du einen Feedback-Link. Wenn du selber etwas zum Inhalt dieser Seite beitragen möchtest, Verbesserungsvorschläge oder konstruktive Kritik üben möchtest, sende mir gerne dein Feedback.

Feedback

Die Seite befindet sich im Augenblick noch im Aufbau. Daher bitte ich dich um dein Verständnis wenn einige Inhalte unvollständig oder zusammenhangslos erscheinen.

Als Grundlage zeige ich dir hier einen kurzen Einblick in das Dokumentenmodel von SVG. Dieser Einblick verfolgt lediglich das Ziel die weiteren Beispiele dieser Site besser zu verstehen. Alle gezeichneten Vektor-Elemente müssen von mindestens einem <svg>...</svg> umschlossen sein. Im folgenden Vierzeiler werden mittels des <rect .../> und <circle .../> ein Rechteck und ein Kreis konstruiert. Damit der Browser diese beiden Objekte anzeigen kann, müssen sie in einem SVG-Element eingeschlossen sein.

Die Startposition x="10" und y="10" im <rect .../>-Tag ist die linke obere Ecke des Rechtecks. Grundsätzlich liegt der Ursprung (x="0", y="0") einer SVG-Zeichenfläche immer in der linken, oberen Ecke der Zeichenfläche. Bei Transformationen könnten diese Koordinaten allerdings verschoben werden. Später mehr dazu.

Im Beispiel ist die sichtbare Zeichenfläche des SVG-Elementes über die Attribute width und height mit den Werten width="200" und height="100" definiert.
Der Kreis (<circle>-Element) ist absichtlich so positioniert, dass du die Beschneidung durch das umgebende SVG-Element sehen kannst. Die Attribute cx="180" und cy="80" legen den Mittelpunkt des Kreises in der Zeichenfläche fest. Das Attribut r="60" definiert den Radius.

Die Attribute stroke (Strich), stroke-width (Strichstärke) und fill (Füllfarbe o. Füllung) dienen der Formatierung des Objektes.

<svg id="zeichenflaeche_1" width="200" height="100">
	<rect x="10" y="10" width="100" height="50" stroke="blue" stroke-width="3" fill="lightblue"/>
	<circle cx="160" cy="80" r="60" stroke="#d35400" stroke-width="3" fill="#f1c40f"/>
</svg>

Das Attribut id (identifier) mit dem Wert zeichenflaeche_1 hat die gleiche Funktion wie in einem HTML-Dokument. Es sollte möglichst nur ein einziges Mal in einem SVG-DOM auftauchen und dient der eindeutigen Identifikation eines Objektes innhalb des Dokuments.

Unsichtbare Elemente innerhalb der Dokumentenstruktur

Die folgenden Elemente innerhalb der Dokumentenstruktur sind in der Ausgabe der Grafik nicht sichtbar. Das Element <desc>...</desc> dient der Beschreibung (Description) des Dokumentes. Auf die Beschreibung kann über das SVG-DOM zugegriffen werden.
Kommentare (z.B.: <!-- ich bin ein Kommentar -->) können wie in HTML-Dokumenten eingefügt werden.
Das Element <title>...</title> dient der Aufnahme eines Titels und ist ebenfalls über das SVG-DOM adressierbar.
Das Element <defs>...</defs> nimmt andere Elemente zum Beispiel für die weitere Wiederverwendung im Dokument auf.

<svg id="zeichenflaeche_2" width="200" height="100">
	<title>2 Lines</title>
	<desc>Beispiel mit zwei Linien</desc>
	<defs>
		<!-- hier stehen nachher die Definitionen zur Wiederverwendung -->
	</defs>
	<rect x="0" y="0" rx="5" ry="5" width="200" height="100" fill="darkblue"/>
	<line x1="10" y1="10" x2="110" y2="10" stroke="red" stroke-width="5"/>
	<line x1="10" y1="60" x2="110" y2="60" stroke="#f1c40f" stroke-width="2"/>
</svg>
2 Lines Beispiel mit zwei Linien

<Defs>-Element (Definitionen)

Wie im vorhergehenden Beispiel schon angedeutet werden Definitionen nicht im SVG-Dokument angezeigt. Im <Defs>-Element werden u.a. Objekte angelegt, die im Dokument wieder verwendet werden können. Im folgenden Beispiel soll dieses anhand eines karierten Hintergrundes (Raster: 20x20) deutlich gemacht.

Mit dem <pattern>-Tag lässt sich ein Muster oder Füllmuster erstellen. In diesem Fall das o. g. Quadrat mit einer Seitenlänge von 20. Die Attribute width und height des Pattern-Elements legen die Größe des Musters fest. Innerhalb des Muster kannst du prinzipiell jedes weitere Zeichenelement verwenden. Dabei solltest du natürlich darauf achten, dass du die Ränder des Zeichenobjektes nicht überschreitest. Ich habe hier innerhalb des pattern-Elementes ein Quadrat mit der gleichen Größe definiert und mit einem weißen Rand und dunkelblauer Füllfarbe formatiert.

In den weiteren Beispielen habe ich weitestgehend versucht ein solches Raster (Grid) 10x10 zum besseren Verständnis im Hintergrund darzustellen (class="svgsamplearea"). Dabei habe ich im Pattern allerdings auf eine Füllfarbe verzichtet weil ich jedes SVG-Element in einen eigenen DIV-Container mit gelegt habe. Dieser DIV-Container lässt sich dann einfach mittels CSS mit einer Füllfarbe und anderen CSS-Attributen formatieren (siehe Beispiele).

<svg id="zeichenflaeche_3" width="200" height="100">
	<title>Arbeiten mit Pattern</title>
	<desc>Beispiel mit kariertem Hintergrund</desc>
	<defs>
		<pattern id="q20px" width="20" height="20" patternUnits="userSpaceOnUse">
			<rect x="0" y="0" width="20" height="20" stroke="white" stroke-width="0.5" fill="darkblue"/>
		</pattern>
	</defs>
	<rect x="0" y="0" rx="10" ry="10" width="200" height="100" fill="url(#q20px)" stroke="white" stroke-width="2"/>
	<line x1="20" y1="20" x2="180" y2="20" stroke="red" stroke-width="5"/>
	<line x1="20" y1="80" x2="180" y2="80" stroke="#f1c40f" stroke-width="2"/>
</svg>	
Arbeiten mit Pattern Beispiel mit kariertem Hintergrund

Abb. 20x20 Raster mit blauer Füllfarbe

Raster für die Beispiele dieser Site

Am folgenden Beispiel kannst du mittels der Regler ausprobieren, wie sich verschiedene Attribute verhalten.

Die geänderten Werte werden direkt in der Grafik angezeigt. An diesem Beispiel lässt sich darüber hinaus auch zeigen, wie sich Attribute im SVG-DOM mittels Javascript oder jQuery anpassen lassen. Den Code für das SVG-DOM, das Formular mit den Regler und das Javascript findest du direkt unter dem Beispiel

Rastergröße 10 x 10 Pixel

x-Wert cx Attribut 150 Pixel

y-Wert cy Attribut 150 Pixel

Radius r Attribut 25 Pixel

Deckkraft fill-opacity Attribut 0.5

Strickstärke stroke-width Attribut 0

SVG Code:

<svg width="100%" height="100%">
	<rect x="0" y="0" width="300" height="300" fill="url(#q10px)" stroke="white" stroke-width="2"/>
	<circle id="gridcheckpoint" cx="150" cy="150" r="25" fill="#f1c40f" fill-opacity="0.5" stroke="red" stroke-width="0"/>
</svg>

Formular Code (Regler):

<div>
	<form>
		<p class="text-white">Rastergröße <span id="gridsizex">10</span> x <span id="gridsizey">10</span> Pixel</p>
		<input id="gridsizecontroller" name="gridsizecontroller" type="range" min="10" max="50" value="10" step="10"/>
		<p class="text-white">x-Wert <i>cx Attribut</i>  <span id="xpos">150</span> Pixel</p>
		<input id="xpositioncontroller" name="xpositioncontroller" type="range" min="0" max="300" value="150" step="1"/>
		<p class="text-white">y-Wert <i>cy Attribut</i> <span id="ypos">150</span> Pixel</p>
		<input id="ypositioncontroller" name="ypositioncontroller" type="range" min="0" max="300" value="150" step="1"/>
		<p class="text-white">Radius <i>r Attribut</i> <span id="circleradius">25</span> Pixel</p>
		<input id="radiuscontroller" name="radiuscontroller" type="range" min="1" max="150" value="25" step="1"/>
		<p class="text-white">Deckkraft <i>fill-opacity Attribut</i> <span id="circlefillopacity">0.5</span></p>
		<input id="opacitycontroller" name="opacitycontroller" type="range" min="0" max="1" value="0.5" step="0.05"/>
		<p class="text-white">Strickstärke <i>stroke-width Attribut</i> <span id="circlesw">0</span></p>
		<input id="swcontroller" name="swcontroller" type="range" min="0" max="10" value="0" step="1"/>
	</form>
</div>

Javascript Code:

<script type="text/javascript">
	$('#gridsizecontroller, #xpositioncontroller, #ypositioncontroller, #radiuscontroller, #opacitycontroller, #swcontroller').change(function() {
		var gridsize = document.getElementById('gridsizecontroller').value;
		var posx = document.getElementById('xpositioncontroller').value;
		var posy = document.getElementById('ypositioncontroller').value;
		var radius = document.getElementById('radiuscontroller').value;
		var circopa = document.getElementById('opacitycontroller').value;
		var circsw = document.getElementById('swcontroller').value;
		$('#gridsizex').html(gridsize);
		$('#gridsizey').html(gridsize);
		$('#xpos').html(posx);
		$('#ypos').html(posy);
		$('#svgcx').html(posx);
		$('#svgcy').html(posy);
		$('#svgcr').html(radius);
		$('#circleradius').html(radius);
		$('#circlefillopacity').html(circopa);
		$('#svgfo').html(circopa);
		$('#circlesw').html(circsw);
		$('#csw').html(circsw);
		$('#q10px').attr("width",gridsize);
		$('#q10px').attr("height",gridsize);
		$('#square10').attr("width",gridsize);
		$('#square10').attr("height",gridsize);
		$('#gridcheckpoint').attr("cx",posx);
		$('#gridcheckpoint').attr("cy",posy);
		$('#gridcheckpoint').attr("r",radius);
		$('#gridcheckpoint').attr('fill-opacity',circopa);
		$('#gridcheckpoint').attr('stroke-width',circsw);
	});
</script>

In den folgenden Beispielen werden den geometrischen Grundelementen Attribute zugeordnet. Diese Attribute beinhalten im Wesentlichen die Koordinaten des jeweiligen Elementes und weitere Eigenschaften, wie z.B. Füllfarben, Linienstärken, Linienart.

In den Ergebnissen habe ich versucht die Koordinaten möglichst immer mit roten Punkten zu kennzeichnen. Diese Koordinaten befinden sich nicht im SVG-Quelltext.

Das Koordinatensystem von SVG hat seinen Ursprung (x = 0 und y = 0) oben links.

SVG Code:

<svg width="100%" height="100%">
	<line x1="50" y1="150" x2="250" y2="50" stroke="#f1c40f" stroke-width="1"/>
	<line x1="50" y1="150" x2="250" y2="150" stroke="white" stroke-width="2"/>
	<line x1="50" y1="150" x2="250" y2="250" stroke="#1abc9c" stroke-width="3"/>
</svg>

In diesem Beispiel werden die drei im Ergebnis gezeigten Linien definiert. Alle Linien haben als erste Koordinate x1 = 50 und y1 = 150. Die y-Koordinaten der Endpunkte (y2) variieren bei den drei Linien-Elementen jeweils um 50px.
Mittels des Attributes stroke wird die Linienfarbe (hier: #f1c40f, white, #1abc9c) festgelegt. Das Attribut stroke-width (Linienstärke) variiert im Beispiel von 1 bis 3.

Ergebnis:

SVG Code:

<svg width="100%" height="100%">
	<rect x="50" y="50" width="50" height="50" stroke="#f1c40f" stroke-width="1" fill="white"/>
	<rect x="75" y="125" width="100" height="50" stroke="white" stroke-width="2" fill="#1abc9c"/>
	<rect x="100" y="200" width="150" height="50" stroke="#1abc9c" stroke-width="3" fill="#f1c40f"/>
</svg>

In diesem Beispiel werden die drei im Ergebnis gezeigten Rechtecke definiert. Alle Rechtecke haben verschiedene Start-Koordinaten (x und y), die sich immer auf den Nullpunkt oben links im Zeichenbereich beziehen. Über die Attribute width und height werden die Breite und die Höhe des Rechteckes definiert.
Mittels des Attributes stroke wird die Linienfarbe (hier: #f1c40f, white, #1abc9c) festgelegt. Das Attribut stroke-width (Linienstärke) variiert im Beispiel von 1 bis 3. Ein weiteres Attribut namens fill füllt die Rechtecke oder andere geschlossen Geometrieen mit der angegebenen Füllfarbe.

SVG Code für Rechtecke mit Radien:

<svg width="100%" height="100%">
	<rect x="50" y="50" rx="10" ry="25" width="50" height="50" stroke="#f1c40f" stroke-width="1" fill="white"/>
	<rect x="75" y="125" rx="25" ry="10" width="100" height="50" stroke="white" stroke-width="2" fill="#1abc9c"/>
	<rect x="100" y="200" rx="25" ry="25" width="150" height="50" stroke="#1abc9c" stroke-width="3" fill="#f1c40f"/>
</svg>

Mit Hilfe der Attribute rx und ry lassen sich abgerundete Rechtecke erstellen. Die rx- und ry-Werte der Radien sind in der rechten Abbildung unter Ergebnis orangefarben dargestellt.

Ergebnis:

SVG Code:

<svg width="100%" height="100%">
	<circle cx="50" cy="50" r="25" stroke="#f1c40f" stroke-width="1" fill="white"/>
	<circle cx="125" cy="125" r="50" stroke="white" stroke-width="2" fill="#1abc9c"/>
	<circle cx="200" cy="200" r="90" stroke="#1abc9c" stroke-width="3" fill="#f1c40f"/>
</svg>

In diesem Beispiel werden die drei im Ergebnis gezeigten Kreise definiert. Alle Kreise haben verschiedene Start-Koordinaten bzw. Ursprünge (cx und cy), die sich immer auf den Nullpunkt oben links im Zeichenbereich beziehen. Bei Kreis-Elementen wird neben den Start-Koordinaten noch der Radius (r) als weiteres Attribut erwartet.
Mittels des Attributes stroke wird die Linienfarbe (hier: #f1c40f, white, #1abc9c) festgelegt. Das Attribut stroke-width (Linienstärke) variiert im Beispiel von 1 bis 3. Ein weiteres Attribut namens fill füllt die Kreise oder andere geschlossen Geometrieen mit der angegebenen Füllfarbe.

Man beachte die Überlappung der Elemente. Ohne weiteres Zutun liegt das zuerst definierte Kreis-Element auf unterster Ebene und das zuletzt definierte Element auf oberster Ebene.

Ergebnis:

SVG Code:

<svg width="100%" height="100%">
	<ellipse cx="50" cy="50" rx="25" ry="12.5" stroke="#f1c40f" stroke-width="1" fill="white"/>
	<ellipse cx="125" cy="125" rx="25" ry="50" stroke="white" stroke-width="2" fill="#1abc9c"/>
	<ellipse cx="200" cy="200" rx="80" ry="40" stroke="#1abc9c" stroke-width="3" fill="#f1c40f"/>
</svg>

In diesem Beispiel werden die drei im Ergebnis gezeigten Ellipsen definiert. Alle Ellipsen haben verschiedene Start-Koordinaten bzw. Ursprünge (cx und cy), die sich immer auf den Nullpunkt oben links im Zeichenbereich beziehen. Bei Ellipse-Elementen werden neben den Start-Koordinaten noch die Längen der großen und kleinen Halbachsen (rx und ry) als weitere Attribute erwartet.
Mittels des Attributes stroke wird die Linienfarbe (hier: #f1c40f, white, #1abc9c) festgelegt. Das Attribut stroke-width (Linienstärke) variiert im Beispiel von 1 bis 3. Ein weiteres Attribut namens fill füllt die Ellipsen oder andere geschlossen Geometrieen mit der angegebenen Füllfarbe.

Ergebnis:

SVG Code:

<svg width="100%" height="100%">
	<polyline points="50 50, 100 50, 75 100, 50 50" stroke="#f1c40f" stroke-width="1" fill="none"/>
	<polyline points="100 150, 100 125, 150 125, 150 150, 200 150, 200 125" stroke="white" stroke-width="2" fill="#1abc9c"/>
	<polyline points="150 200, 250 150, 250 250, 150 200" stroke="#1abc9c" stroke-width="3" fill="#f1c40f"/>
	<polyline points="50 250, 100 200, 100 250" stroke="red" stroke-width="1">
</svg>

In diesem Beispiel werden die vier im Ergebnis gezeigten Polylinien definiert. Die Koordinaten einer Polylinie werden über das Attribut points in Form einer Komma-separierten Liste festgelegt.
Mittels des Attributes stroke wird die Linienfarbe (hier: #f1c40f, white, #1abc9c, red) festgelegt. Das Attribut stroke-width (Linienstärke) variiert im Beispiel von 1 bis 3.
Das Attribut fill verhält sich bei Polylinien, die nicht an ihrer Start-Koordinate enden, so, als würde vom letzten Punkt der Polylinie eine Verbindung zum ersten Punkt gezogen werden. Alle eingeschlossenen Flächen werden mit der angegebenen Füllfarbe gefüllt (siehe 2. Polylinie).
Mit dem Wert none für das Attribut fill wird die Füllfarbe eines Elements entfernt (siehe 1. Polylinie).
Endet die Polylinie auf den Koordinaten des Startpunktes erscheint die eingeschlossene Fläche gefüllt (siehe 3. Polylinie).
ACHTUNG! Wenn das Attribut fill bei einer Polylinie nicht angegeben wird, wird die eingeschlossene Fläche mit der Füllfarbe Schwarz gefüllt (siehe 4. Polyline).

Ergebnis:

SVG Code:

<svg width="100%" height="100%">
	<polygon points="50 50, 100 50, 75 100" stroke="#f1c40f" stroke-width="3" fill="white"/>
	<polygon points="100 150, 100 125, 150 125, 150 150, 200 150, 200 125" stroke="white" stroke-width="2" fill="#1abc9c"/>
	<polyline points="150 200, 250 150, 250 250, 150 200" stroke="#1abc9c" stroke-width="1" fill="#f1c40f"/>
</svg>

In diesem Beispiel werden die drei im Ergebnis gezeigten Polygone definiert. Die Koordinaten der Polygone werden über das Attribut points in Form einer Komma-separierten Liste festgelegt. Der wesentliche Unterschied zwischen Polyline-Elementen und Polygon-Elementen besteht darin, dass ein Polygon immer eine geschlossene Kontur aufweist.
Mittels des Attributes stroke wird die Linienfarbe (hier: #f1c40f, white, #1abc9c, red) festgelegt. Das Attribut stroke-width (Linienstärke) variiert im Beispiel von 1 bis 3.
Das 2. Polygon hat die gleichen Werte für das points-Attribut wie die Polyline im vorangegangenen Kapitel Polylinie. Der Unterschied besteht darin, dass hier vom Endpunkt der Linie eine Verbindung zurück zum Ausgangspunkt der Linie gezogen wird um die Kontur zu schließen.
Mit dem Wert none für das Attribut fill wird bei Polygonen ebenfalls die Füllfarbe eines Elements entfernt (siehe 3. Polygon).

Ergebnis:

Die folgenden Beispiel sollen dir erste Schritte bei der Verwendung des transform-Attributes verdeutlichen. Grundsätzlich lassen sich alle SVG-Elemente des vorherigen Abschnittes transformieren.
Etwas komplizierter wird es, wenn gruppierte Elemente transformiert werden sollen. Bei Gruppen die mittels eines <g>-Elements gebildet werden, ist es nicht immer ganz einfach den richtigen Rotationspunkt zu finden.

SVG Code:

<svg width="100%" height="100%">
	<rect x="50" y="50" width="50" height="50" stroke="#f1c40f" stroke-width="1" fill="white"/>
	<rect x="50" y="50" width="50" height="50" stroke="#f1c40f" stroke-opacity="0.8" stroke-width="1" fill="blue" fill-opacity="0.5" transform="translate(20)"/>
	<rect x="50" y="120" width="100" height="50" stroke="white" stroke-width="2" fill="#1abc9c"/>
	<rect x="50" y="120" width="100" height="50" stroke="white" stroke-opacity="0.5" stroke-width="2" fill="blue" fill-opacity="0.5" transform="translate(80,-30)"/>
	<rect x="50" y="200" width="150" height="50" stroke="#1abc9c" stroke-width="3" fill="#f1c40f"/>
	<rect x="50" y="200" width="150" height="50" stroke="#1abc9c" stroke-opacity="0.5" stroke-width="3" fill="blue" fill-opacity="0.5" transform="translate(-30,30)"/>
</svg>

Mittels translate lassen sich gezeichnete Objekte in x- und y-Richtung verschieben. Dabei werden die Werte der Verschiebung relativ angegeben. Das folgende Beispiel veranschaulicht diese Funktion.
Die roten Punkte sind die Ursprungspunkte (Origins) der jeweiligen Rechtecke. Die orange gekennzeichneten Punkte zeigen die Ursprünge nach der Transformation mit translate an.

Das weiße Quadrat wird mit translate(10) in x-Richtung um 10px verschoben.
Das grüne Rechteck wird mit translate(100,-75) in x-Richtung um 75px nach rechts und um -25px nach oben verschoben.
Das gelbe Rechteck wird mit translate(50,-75) in x-Richtung um 25px nach links und um 25px nach unten verschoben.
Die Rechtecke nach der Transformation sind mit der Füllfarbe Blau 50% dargestellt.
Die Transparenz der Füllung und Linie lässt sich übrigens mit den Attributen fill-opacity und stroke-opacity einstellen. Der Standard-Wert ist 1 und entspricht 100%. Es sind somit Werte zwischen 0 und 1 erlaubt.

MERKE! Die Werte der translate-Funktion werden also einfach auf die Ursprungsposition addiert.

Ergebnis:

SVG Code:

<svg width="100%" height="100%">
	<rect x="50" y="50" width="50" height="50" stroke="#f1c40f" stroke-width="1" fill="white"/>
	<rect x="50" y="50" width="50" height="50" stroke="#f1c40f" stroke-width="1" fill="blue" fill-opacity="0.5" transform="scale(1.5)"/>
	<rect x="50" y="50" width="50" height="50" stroke="#f1c40f" stroke-width="1" fill="purple" fill-opacity="0.5" transform="scale(2)"/>
	<rect x="50" y="50" width="50" height="50" stroke="#f1c40f" stroke-width="1" fill="green" fill-opacity="0.5" transform="scale(0.5)"/>
</svg>

Mittels scale lassen sich gezeichnete Objekte in x- und y-Richtung skalieren. Dabei werden alle Werte mit dem Skalierungsfaktor multipliziert. Die gilt im Falle des Rechtecks sowohl für die Ursprungskoordinaten als auch für die Breite, die Länge und die Linienstärke.
Die roten Punkte sind die Ursprungspunkte (Origins) der jeweiligen Rechtecke. Die orange gekennzeichneten Punkte zeigen die Ursprünge nach der Transformation mit translate an.

Das weiße Quadrat wird mit translate(10) in x-Richtung um 10px verschoben.
Das grüne Rechteck wird mit translate(100,-75) in x-Richtung um 75px nach rechts und um -25px nach oben verschoben.
Das gelbe Rechteck wird mit translate(50,-75) in x-Richtung um 25px nach links und um 25px nach unten verschoben.
Die Rechtecke nach der Transformation sind mit der Füllfarbe Blau 50% dargestellt. Die Transparenz der Füllung lässt sich übrigens mit dem Attribut fill-opacity einstellen. Der Standard-Wert ist 1 und entspricht 100%. Es sind somit Werte zwischen 0 und 1 erlaubt.

MERKE! Die Werte der translate-Funktion werden also einfach auf die Ursprungsposition addiert.

Ergebnis:

Über die folgenden Schaltflächen findest du ein paar Beispiele, in denen ich dir zeigen möchte, was mit SVG möglich ist. Natürlich sind deiner Kreativität keine Grenzen gesetzt und du kannst gerne die Beispiele für weitere Anwendungsfälle verwenden.

In diesem Beispiel siehst du die Konstruktion eines rechtwinkeligen Dreiecks mit Hilfe des <path.../>-Elements.

Der gestrichelte Kreisbogen ist ebenfalls mit einem <path.../>-Element konstruiert, wird aber im folgenden Code nicht angezeigt.
Wenn du mit dem Regler den Winkel veränderst siehst du die Änderungen parallel auch im <path.../>-Element.
Beim ersten und letzten Koordinatenpaar handelt es sich um absolute Werte innerhalb der SVG-Zeichenfläche. Du erkennst sie an dem groß geschriebenen Kommando. M steht für moveto und L für lineto. Die mittlere Koordinate wird mit einem kleinen l als Kommando eingeleitet. Klein geschriebene Kommandos stellen relative Koordinaten zur vorhergehenden Koordinate des Pfades dar. Im Beispiel bezieht sich also das zweite Koordinatenpaar hinter dem kleinen l auf das vorhergehende Koordinatenpaar M 10,200. Das Kommando z am Ende des Pfades schließt den Pfad vom letzten Koordinatenpaar zum ersten Koordinatenpaar des Pfades.

SVG Code:

<path id="rd" d="M 10,200 l 140,-140 L 290,200z" stroke="purple" stroke-width="2" fill="#f1c40f" fill-opacity="0.6"/>

Beispiel:

1 2 3

Winkel (90°)

x-Wert: 140

y-Wert: -140

Die x- und y-Werte werden mit den trigonometrischen Funktionen cos(Winkel) und sin(Winkel) ermittelt und und mit ein paar weiteren Berechnungen vom kartesischen Koordinatensystem auf das Koordinatensystem der SVG-Zeichenfläche angepasst.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Autor: Cicero

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Autor: Cicero

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

start writing...
<script>
	$('#startbutton').click(function() {
		$('#schrift').attr("class","animatedfont");
	});
</script>	

Hier jetzt noch das animateMotion-Element aus der dem SVG-Element. Das animateMotion-Element sollte sich im defs-Element befinden.

<defs>
	<animateMotion	xlink:href  = "#illustrator"
			begin       = "startbutton.click"
			dur         = "3600ms"
			repeatCount = "1"
			fill = "freeze">
		<mpath xlink:href="#fontshape"/>
	</animateMotion>
</defs>	

Autor

Norbert Mesch

Sophie-Immeyer-Straße 40
49080 Osnabrück

Email an mich

Haftung für Inhalte

Als Diensteanbieter sind wir gemäß § 7 Abs.1 TMG für eigene Inhalte auf diesen Seiten nach den allgemeinen Gesetzen verantwortlich. Nach §§ 8 bis 10 TMG sind wir als Diensteanbieter jedoch nicht verpflichtet, übermittelte oder gespeicherte fremde Informationen zu überwachen oder nach Umständen zu forschen, die auf eine rechtswidrige Tätigkeit hinweisen. Verpflichtungen zur Entfernung oder Sperrung der Nutzung von Informationen nach den allgemeinen Gesetzen bleiben hiervon unberührt. Eine diesbezügliche Haftung ist jedoch erst ab dem Zeitpunkt der Kenntnis einer konkreten Rechtsverletzung möglich. Bei Bekanntwerden von entsprechenden Rechtsverletzungen werden wir diese Inhalte umgehend entfernen.

Haftung für Links

Unser Angebot enthält Links zu externen Webseiten Dritter, auf deren Inhalte wir keinen Einfluss haben. Deshalb können wir für diese fremden Inhalte auch keine Gewähr übernehmen. Für die Inhalte der verlinkten Seiten ist stets der jeweilige Anbieter oder Betreiber der Seiten verantwortlich. Die verlinkten Seiten wurden zum Zeitpunkt der Verlinkung auf mögliche Rechtsverstöße überprüft. Rechtswidrige Inhalte waren zum Zeitpunkt der Verlinkung nicht erkennbar. Eine permanente inhaltliche Kontrolle der verlinkten Seiten ist jedoch ohne konkrete Anhaltspunkte einer Rechtsverletzung nicht zumutbar. Bei Bekanntwerden von Rechtsverletzungen werden wir derartige Links umgehend entfernen.

Urheberrecht

Die durch die Seitenbetreiber erstellten Inhalte und Werke auf diesen Seiten unterliegen dem deutschen Urheberrecht. Die Vervielfältigung, Bearbeitung, Verbreitung und jede Art der Verwertung außerhalb der Grenzen des Urheberrechtes bedürfen der schriftlichen Zustimmung des jeweiligen Autors bzw. Erstellers. Downloads und Kopien dieser Seite sind nur für den privaten, nicht kommerziellen Gebrauch gestattet. Soweit die Inhalte auf dieser Seite nicht vom Betreiber erstellt wurden, werden die Urheberrechte Dritter beachtet. Insbesondere werden Inhalte Dritter als solche gekennzeichnet. Sollten Sie trotzdem auf eine Urheberrechtsverletzung aufmerksam werden, bitten wir um einen entsprechenden Hinweis. Bei Bekanntwerden von Rechtsverletzungen werden wir derartige Inhalte umgehend entfernen.

Frameworks

B

Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.

zu Bootstrap

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.

zu jQuery

Tools

Flat UI Colors
flatuicolors.com

zu Flat UI Colors

Flat UI Colors liefert Farben mit ansprechenden Kontrasten für Websites im Flat Design Style.

Newsletter abonieren

Hier die Email-Adresse eingeben