8. Unterrichtsblock

HTML & SVG

SVG steht für Scalable Vector Graphics. SVG definiert vektorbasierte Grafiken im XML-Format.

<!-- SVG Beispiel -->
<svg width="300" height="300">
  <circle cx="150" cy="150" r="140" stroke="mediumblue" stroke-width="2" fill="lightblue"></circle>
</svg>

SVG ist die W3C Empfehlung für die Darstellung von Grafiken in HTML-Dokumenten.

Vergleich SVG & JPG

Der Vorteil von SVG-Grafiken im Gegensatz zu JPG-Dateien ist Skalierbarkeit. SVG sind Vektorgrafiken und können an alle Größen ohne Qualitätsverlust angepasst werden.

Beispiel 1

SVG hat einige vordefinierte Formelemente:

• Rechteck <rect>
• Kreis <circle>
• Ellipse <ellipse>
• Linie <line>
• Polyline <polyline>
• Polygon <polygon>
• Pfad <path>

SVG Koordinaten

Die Koordinate mit dem Wert 0/0 befindet sich bei SVG und Canvas immer im linken oberen Eck

<svg height="250" width="500">
  <line x1="0" y1="30" x2="200" y2="30" style="stroke:rgb(255,0,0);stroke-width:2" />
  <line x1="30" y1="0" x2="30" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" />
  <text x="10" y="20" fill="red">0</text>
  <text x="170" y="20" fill="red">100</text>
  <text x="0" y="190" fill="red">100</text>
  <text x="100" y="20" fill="red">X</text>
  <text x="7" y="100" fill="red">Y</text>
</svg>

SVGs können Animationen darstellen

Klicke auf einen Teil der Zeichnung, um eine Explosionszeichnung zu erzeugen.

SVGs können Text enthalten und Farbübergänge darstellen

<svg height="auto" width="100%">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:#FC8587; stop-opacity:1" />
      <stop offset="100%" style="stop-color:#FF006E; stop-opacity:1" />
    </linearGradient>
  </defs>
  <rect x="0" y="0" width="100%" height="150" fill="url(#grad1)" />
  <text fill="#ffffff" font-size="45" font-family="Verdana"
  x="50" y="86">Das ist mein Text</text>
</svg>

Programm zur Erstellung von SVG-Dateien

https://inkscape.org/de/

SVG Elemente inkl. Beschreibung und Attribute

Element	Beschreibung	Attribute
<a>	Erstellt einen Link um SVG-Elemente herum	xlink:show xlink:actuate xlink:href target
<animate>	Definiert, wie sich ein Attribut eines Elements im Laufe der Zeit ändert	attributeName=“der Name des Zielattributs“ by=“ein relativer Wert, um den sich der Attributwert ändern soll“ from=“der Startwert“ to=“der Endwert“ dur=“die Dauer“ repeatCount=“wie oft die Animation stattfinden wird“
<animateMotion>	Bewirkt, dass sich ein referenziertes Element entlang eines Bewegungspfads bewegt	calcMode=“der Interpolationsmodus für die Animation. Dieser kann ‚discrete‘, ‚linear‘, ‚paced‘, ’spline‘ enthalten“ path=“der Bewegungspfad“ keyPoints=“wie weit entlang des Bewegungspfades sich das Objekt im Moment bewegen soll“ rotate=“Wendet eine Rotationstransformation an“ xlink:href=“ein URI-Verweis auf das <path>-Element, das den Bewegungspfad definiert“
<animateTransform>	Animiert ein Transformationsattribut auf einem Zielelement, wodurch Animationen die Übersetzung, Skalierung, Drehung und/oder Neigung steuern können	by=“ein relativer Offset-Wert“ from=“der Startwert“ to=“der Endwert“ type=“die Art der Transformation, deren Werte sich im Laufe der Zeit ändern sollen. Kann ‚translate‘, ’scale‘, ‚rotate‘, ’skewX‘, ’skewY‘ sein“
<circle>	Erzeugt einen Kreis	cx=“das x-Achsenzentrum des Kreises“ cy=“das y-Achsenzentrum des Kreises“ r=“Der Radius des Kreises“. Erforderlicher Wert. Präsentationsattribute: Color, FillStroke, Graphics
<clipPath>	Beim (Clipping) Abschneiden geht es darum, das zu verbergen, was normalerweise gezeichnet würde. Die Schablone, die definiert, was gezeichnet wird und was nicht, wird Beschneidungspfad genannt	clip-path=“der referenzierte Beschneidungspfad wird mit dem referenzierenden Beschneidungspfad geschnitten“ clipPathUnits=“‚userSpaceOnUse‘ oder ‚objectBoundingBox‘. Der zweite Wert macht Einheiten von Kindern zu einem Bruchteil des Objektbegrenzungsrahmens, der die Maske verwendet (Standard: ‚userSpaceOnUse‘).“
<color-profile>	Gibt eine Farbprofilbeschreibung an (wenn das Dokument mit CSS formatiert ist)	local=“die eindeutige ID für ein lokal gespeichertes Farbprofil“ name=“Der Name“ rendering-intent=“auto|perceptual|relative-colorimetric|saturation|absolute-colorimetric“ xlink:href=“der URI einer ICC-Profilressource“
<cursor>	Definiert einen plattformunabhängigen benutzerdefinierten Cursor	x=“die linke obere Ecke der X-Achse des Cursors (Standard ist 0)“ y=“die linke obere Ecke der Y-Achse des Cursors (Standard ist 0)“ xlink:href=“der URI des Bildes, das als Cursor verwendet werden soll“
<defs>	Ein Container für referenzierte Elemente
<desc>	Eine reine Textbeschreibung für Containerelemente oder grafische Elemente in SVG (Benutzerprogramme können den Text als Tooltip anzeigen)
<ellipse>	Erzeugt eine Ellipse	cx=“das X-Achsenzentrum der Ellipse“ cy=“das Y-Achsenzentrum der Ellipse“ rx=“die Länge des Radius der Ellipse entlang der X-Achse“. Erforderlicher Wert. ry=“die Länge des Radius der Ellipse entlang der Y-Achse“. Erforderlicher Wert. Präsentationsattribute: Color, FillStroke, Graphics
<feBlend>	Setzt zwei Objekte gemäß einem bestimmten Mischmodus zusammen	mode=“the image blending modes: normal|multiply|screen|darken|lighten“ in=“identifiziert die Eingabe für das angegebene Filterelement: SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint | <filter-primitive-reference>“ in2=“das zweite Eingabebild für die Mischoperation“
feColorMatrix	SVG-Filter. Wendet eine Matrixtransformation an
feComponentTransfer	SVG-Filter. Führt eine komponentenweise Neuzuordnung von Daten durch
feComposite	SVG-Filter.
feConvolveMatrix	SVG-Filter.
feDiffuseLighting	SVG-Filter.
feDisplacementMap	SVG-Filter.
feDistantLight	SVG-Filter. Definiert eine Lichtquelle
feFlood	SVG-Filter.
feFuncA	SVG-Filter. Unterelement von feComponentTransfer
feFuncB	SVG-Filter. Unterelement von feComponentTransfer
feFuncG	SVG-Filter. Unterelement von feComponentTransfer
feFuncR	SVG-Filter. Unterelement von feComponentTransfer
feGaussianBlur	SVG-Filter. Führt eine Gaußsche Unschärfe auf dem Bild aus
feImage	SVG-Filter.
feMerge	SVG-Filter. Erstellt Bildebenen übereinander
feMergeNode	SVG-Filter. Unterelement von feMerge
feMorphology	SVG-Filter. Führt ein „Anfetten“ oder „Ausdünnen“ einer Quellgrafik durch
feOffset	SVG-Filter. Verschiebt ein Bild relativ zu seiner aktuellen Position
fePointLight	SVG-Filter.
feSpecularLighting	SVG-Filter.
feSpotLight	SVG-Filter.
feTile	SVG-Filter.
feTurbulence	SVG-Filter.
filter	Container für Filtereffekte
font	Definiert eine Schriftart
font-face	Beschreibt die Eigenschaften einer Schriftart
font-face-format
font-face-name
font-face-src
font-face-uri
foreignObject
<g>	Wird verwendet, um Elemente zu gruppieren	id=“der Name der Gruppe“ fill=“die Füllfarbe für die Gruppe“ opacity=“die Lichtundurchlässigkeit für die Gruppe“ Präsentationsattribute: Alle verfügbaren
glyph	Definiert die Grafiken für eine bestimmte Glyphe
glyphRef	Definiert eine mögliche zu verwendende Glyphe
hkern
<image>	Definiert ein Bild	x=“die x-Achse in der oberen linken Ecke des Bildes“ y=“die y-Achse in der oberen linken Ecke des Bildes“ width=“Die Weite des Bildes“. Erforderlicher Wert. height=“Die Höhe des Bildes“. Erforderlicher Wert. xlink:href=“Der Pfad des Bildes“. Erforderlicher Wert. Präsentationsattribute: Color, Graphics, Images, Viewports
<line>	Definiert eine Linie	x1=“der x-Startpunkt der Linie“ y1=“der y-Startpunkt der Linie“ x2=“der x-Endpunkt der Linie“ y2=“der y-Endpunkt der Linie“ Präsentationsattribute: Color, FillStroke, Graphics, Markers
<linearGradient>	Definiert einen linearen Farbverlauf. Lineare Verläufe füllen das Objekt mithilfe eines Vektors und können als horizontale, vertikale oder Winkelverläufe definiert werden.	id=“die eindeutige ID, die verwendet wird, um auf dieses Muster zu verweisen. Erforderlich, um darauf zu verweisen“ gradientUnits=“‚userSpaceOnUse‘ oder ‚objectBoundingBox‘. Verwenden die Ansichtsbox oder das Objekt, um die relative Position von Vektorpunkten zu bestimmen. (Standard ‚objectBoundingBox‘)“ gradientTransform=“die auf den Farbverlauf anzuwendende Transformation“ x1=“der x-Startpunkt des Verlaufsvektors (Zahl oder % – 0 % ist Standard)“ y1=“der y-Startpunkt des Gradientenvektors. (0 % Standard)“ x2=“der x-Endpunkt des Gradientenvektors. (100 % Standard)“ y2=“der y-Endpunkt des Gradientenvektors. (0 % Standard)“ spreadMethod=“‚pad‘ oder ‚reflect‘ oder ‚repeat'“ xlink:href=“Verweis auf einen anderen Gradienten, dessen Attributwerte als Standardwerte verwendet werden, und Stopps enthalten. Rekursiv“
<marker>	Marker können auf den Scheitelpunkten von Linien, Polylinien, Polygonen und Pfaden platziert werden. Diese Elemente können die Markerattribute „marker-start“, „marker-mid“ und „marker-end“ verwenden, die standardmäßig erben oder auf „none“ gesetzt werden können, oder die URI eines definierten Markers. Sie müssen zuerst den Marker definieren, bevor Sie ihn über seinen URI referenzieren können. Jede Art von Form kann innerhalb des Markers platziert werden. Sie werden über dem Element gezeichnet, an das sie angehängt sind	markerUnits=“’strokeWidth‘ oder ‚userSpaceOnUse‘. Wenn ’strokeWidth‘ verwendet wird, entspricht eine Einheit einer Strichbreite. Andernfalls wird der Marker nicht skaliert und verwendet die gleichen Ansichtseinheiten wie das referenzierende Element (Standardeinstellung ’strokeWidth‘).“ refx=“die Position, an der der Marker mit dem Scheitelpunkt verbunden ist (Standard 0)“ refy=“die Position, an der der Marker mit dem Scheitelpunkt verbunden ist (Standard 0)“ orient=“‚auto‘ oder ein Winkel, um den Marker immer anzuzeigen. ‚auto‘ berechnet einen Winkel, der die x-Achse zu einer Tangente des Scheitelpunkts macht (Standard 0)“ markerWidth=“die Breite des Markers (Standard 3)“ markerHeight=“die Höhe des Markers (Standard 3)“ viewBox=“die Punkte, die in diesem SVG-Zeichenbereich „gesehen“ werden. 4 Werte, getrennt durch Leerzeichen oder Kommas. (min x, min y, with, height)“ Präsentationsattribute: Alle verfügbaren
<mask>	Maskieren ist eine Kombination aus Deckkraftwerten und Clipping. Wie beim Beschneiden können Sie Formen, Text oder Pfade verwenden, um Abschnitte der Maske zu definieren. Der Standardzustand einer Maske ist vollständig transparent, was das Gegenteil einer Schnittebene ist. Die Grafiken in einer Maske legen fest, wie undurchsichtig Teile der Maske sind	maskUnits=“‚userSpaceOnUse‘ oder ‚objectBoundingBox‘ legen fest, ob die Schnittebene relativ zum vollständigen Ansichtsfenster oder Objekt ist (Standard: ‚objectBoundingBox‘)“ maskContentUnits=“Verwenden Sie die zweite mit Prozentwerten, um Maskengrafikpositionen relativ zum Objekt festzulegen. ‚userSpaceOnUse‘ oder ‚objectBoundingBox‘ (Standard: ‚userSpaceOnUse‘)“ x=“die Schnittebene der Maske (Standard: -10%)“ y=“die Schnittebene der Maske (Standard: -10%)“ width=“die Schnittebene der Maske (Standard: 120 %)“ height=“die Schnittebene der Maske (Standard: 120 %)“
metadata	Gibt Metadaten an
missing-glyph
mpath
<path>	Definiert einen Pfad	d=“eine Reihe von Befehlen, die den Pfad definieren“ pathLength=“Falls vorhanden, wird der Pfad so skaliert, dass die berechnete Pfadlänge der Punkte diesem Wert entspricht“ transform=“eine Liste von Transformationen“ Präsentationsattribute: Color, FillStroke, Graphics, Markers
<pattern>	Definiert die Koordinaten, die die Ansicht und die Größe der Ansicht anzeigen soll. Dann werden dem Muster Formen hinzugefügt. Das Muster wiederholt sich, wenn eine Kante der Sichtbox (Sichtbereich) getroffen wird	id=“Die eindeutige ID, die verwendet wird, um auf dieses Muster zu verweisen.“ Erforderlich. patternUnits=“‚userSpaceOnUse‘ oder ‚objectBoundingBox‘. Der zweite Wert macht Einheiten von x, y, Breite, Höhe zu einem Bruchteil (oder %) des Objektbegrenzungsrahmens, der das Muster verwendet.“ patternContentUnits=“‚userSpaceOnUse‘ oder ‚objectBoundingBox'“ patternTransform=“ermöglicht die Transformation des gesamten Musters“ x=“Abstand des Musters von der oberen linken Ecke (Standard 0)“ y=“Abstand des Musters von der oberen linken Ecke (Standard 0)“ width=“die Breite der Musterkachel (Standard 100%)“ height=“die Höhe der Musterkachel (Standard 100%) viewBox=“die Punkte, die in diesem SVG-Zeichenbereich „gesehen“ werden. 4 Werte, getrennt durch Leerzeichen oder Kommas. (min x, min y, Breite, Höhe)“ xlink:href=“Verweis auf ein anderes Muster, dessen Attributwerte als Standardwerte verwendet werden und alle untergeordneten Elemente geerbt werden. Rekursiv“
<polygon>	Definiert eine Grafik, die mindestens drei Seiten enthält	points=“die Punkte des Polygons. Die Gesamtzahl der Punkte muss gerade sein“. Erforderlich. fill-rule=“Teil der FillStroke-Präsentationsattribute“ Präsentationsattribute: Color, FillStroke, Graphics, Markers
<polyline>	Definiert eine beliebige Form, die nur aus geraden Linien besteht	points=“die Punkte auf der Polylinie“. Erforderlich. Präsentationsattribute: Color, FillStroke, Graphics, Markers
<radialGradient>	Definiert einen runden (radialen) Farbverlauf. Radiale Farbverläufe werden erstellt, indem Sie einen Kreis nehmen und die Werte zwischen den Farbverlaufsstopps vom Fokuspunkt zum Außenradius fließend ändern.	gradientUnits=“‚userSpaceOnUse‘ oder ‚objectBoundingBox‘. Verwenden Sie die Ansichtsbox oder das Objekt, um die relative Position von Vektorpunkten zu bestimmen. (Standard ‚objectBoundingBox‘) gradientTransform=“die auf den Gradienten anzuwendende Transformation“ cx=“der Mittelpunkt des Farbverlaufs (Zahl oder % – 50 % ist Standard)“ cy=“der Mittelpunkt des Farbverlaufs. (50 % Standard)“ r=“der Radius des Farbverlaufs. (50 % Standard)“ fx=“der Fokuspunkt des Farbverlaufs. (0 % Standard)“ fy=“der Fokuspunkt des Farbverlaufs. (0 % Standard)“ spreadMethod=“‚pad‘ oder ‚reflect‘ oder ‚repeat'“ xlink:href=“Verweis auf einen anderen Farbverlauf, dessen Attributwerte als Standardwerte verwendet werden, und Stopps enthalten. Rekursiv“
<rect>	Erzeugt ein Rechteck	x=“die linke obere Ecke der x-Achse des Rechtecks“ y=“die linke obere Ecke der y-Achse des Rechtecks“ rx=“der x-Achsenradius (um das Element zu runden)“ ry=“der y-Achsenradius (um das Element zu runden)“ width=“die Breite des Rechtecks“. Erforderlich. height=“die Höhe des Rechtecks“. Erforderlich. Präsentationsattribute: Color, FillStroke, Graphics
script	Container für Skripte (z. B. ECMAScript)
set	Legt den Wert eines Attributs für eine angegebene Dauer fest
<stop>	Die Endpunkte für einen Gradienten (Farbverlauf)	offset=“der Versatz für diesen Stopp (0 bis 1/0 % bis 100 %)“. Erforderlich. stop-color=“die Farbe für diesen Stopp“ stop-opacity=“die Lichtundurchlässigkeit für diesen Stopp (0 bis 1)“
style	Die Anschläge für einen Gradienten
<svg>	Erstellt ein SVG-Dokumentfragment	x=“obere linke Ecke wenn eingebettet (Standard 0)“ y=“obere linke Ecke wenn eingebettet (Standard 0)“ width=“die Breite des SVG-Fragments (Standard 100 %)“ height=“die Höhe des SVG-Fragments (Standard 100 %)“ viewBox=“die Punkte, die in diesem SVG-Zeichenbereich „gesehen“ werden. 4 Werte, getrennt durch Leerzeichen oder Kommas. (min x, min y, Breite, Höhe)“ preserveAspectRatio=“’none‘ oder eine der 9 Kombinationen von ‚xVALYVAL‘, wobei VAL ‚min‘, ‚mid‘ oder ‚max‘ ist. (Standard xMidYMid)“ zoomAndPan=“‚Vergrößern‘ oder ‚Deaktivieren‘. Mit der Vergrößerungsoption können Benutzer Ihre Datei schwenken und zoomen (Standardvergrößerung)“ xml=“Das äußerste <svg>-Element muss SVG und seinen Namespace einrichten: xmlns=“http://www.w3.org/2000/svg“ xmlns:xlink=“http://www.w3.org/1999/xlink“ xml:space=“preserve““ Präsentationsattribute: Alle verfügbaren
switch
symbol
<text>	Generiert Text	x=“eine Liste von x-Achsen-Positionen. Die n-te x-Achsen-Position wird dem n-ten Zeichen im Text zugewiesen. Wenn nach Ablauf der Positionen weitere Zeichen vorhanden sind, werden sie nach dem letzten Zeichen platziert. 0 ist Standard.“ y=“eine Liste von y-Achsenpositionen. (siehe x). 0 ist Standard“ dx=“eine Liste von Längen, die die Zeichen relativ zur absoluten Position der zuletzt gezeichneten Glyphe bewegt. (siehe x)“ dy=“eine Liste von Längen, die die Zeichen relativ zur absoluten Position der zuletzt gezeichneten Glyphe bewegt. (siehe x)“ rotate=“eine Liste von Rotationen. Die n-te Rotation wird am n-ten Zeichen durchgeführt. Zusätzliche Zeichen erhalten NICHT den letzten Rotationswert.“ textLength=“eine Ziellänge für den Text, zwischen der der SVG-Viewer versucht, den Text anzuzeigen, indem er den Abstand und/oder die Glyphen anpasst. (Standard: Die normale Länge des Textes)“ lengthAdjust=“teilt dem Betrachter mit, was er anpassen muss, um zu versuchen, den Text zu rendern, wenn die Länge angegeben ist. Die beiden Werte sind ’spacing‘ und ’spacingAndGlyphs'“ Präsentationsattribute: Color, FillStroke, Graphics, FontSpecification, TextContentElements
textPath
title	Eine reine Textbeschreibung für Elemente in SVG, die nicht als Teil der Grafik angezeigt wird. Benutzerprogramme können den Text als Tooltip anzeigen
<tref>	Verweist auf ein beliebiges <text>-Element im SVG-Dokument und verwendet es wieder	Identisch mit dem <text>-Element
<tspan>	Identisch mit dem <text>-Element, kann aber in Text-Tags und in sich selbst verschachtelt werden	Identisch mit dem <text>-Element Zusätzlich: xlink:href=“Referenziert ein <text>-Element“
<use>	Verwendet einen URI, um auf ein <g>, <svg> oder ein anderes grafisches Element mit einem eindeutigen ID-Attribut zu verweisen und es zu replizieren. Die Kopie ist nur ein Verweis auf das Original, sodass nur das Original im Dokument vorhanden ist. Jede Änderung am Original wirkt sich auf alle Kopien aus.	x=“die linke obere Ecke der X-Achse des geklonten Elements“ y=“die linke obere Ecke der Y-Achse des geklonten Elements“ width=“die Breite des geklonten Elements“ height=“die Höhe des geklonten Elements“ xlink:href=“ein URI-Verweis auf das geklonte Element“ Präsentationsattribute: Alle verfügbaren
view
vkern

Was ist HTML-Canvas?

• Das HTML-Element <canvas> wird verwendet, um Grafiken im Handumdrehen über Skripte (normalerweise JavaScript) zu zeichnen.
• Das <canvas>-Element ist nur ein Container für Grafiken. Sie müssen ein Skript verwenden, um die Grafiken tatsächlich zu zeichnen.
• Canvas verfügt über mehrere Methoden zum Zeichnen von Pfaden, Kästchen, Kreisen, Text und zum Hinzufügen von Bildern.

Canvas-Beispiel

In HTML sieht ein <canvas>-Element so aus:

<canvas id="myCanvas" width="200" height="100"></canvas>

• Das <canvas>-Element muss ein id-Attribut haben, damit JavaScript darauf verweisen kann.
• Das width- und height-Attribut ist notwendig, um die Größe der Leinwand zu definieren.

Mit JavaScript in Canvas zeichnen

Alle Zeichnungen in HTML-Canvas-Elementen müssen mit JavaScript erfolgen:

Beispiel

Your browser does not support the canvas element.

<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #d3d3d3;">
</canvas>

<script>

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.moveTo(0,100);
ctx.lineTo(40,90);
ctx.lineTo(50,95);
ctx.lineTo(60,85);
ctx.lineTo(110,90);
ctx.lineTo(150,50);
ctx.lineTo(180,60);
ctx.lineTo(200,95);
ctx.stroke();

</script>

Interaktivität

Durch den Einsatz von JavaScript können die HTML-Canvas-Elemente interaktiv gestaltet werden.

See the Pen Tearable Cloth by dissimulate (@dissimulate) on CodePen.

Weitere Beispiele für HTML5 Canvas elemente: https://webdesign.tutsplus.com/21-ridiculously-impressive-html5-canvas-experiments–net-14210a

Übungsaufgabe

1. Aufgabe

• Zeichne einen SVG-Kreis, welcher auf diese Seite verlinkt
• Radius: 150px; Außenlinie: hellgrün und 2px breit; Innenfüllung: dunkelgrün;
• Schiebe die fertige Datei auf den Backupserver

2. Aufgabe

• Zeichne ein SVG-Rechteck, welches über die gesamte Breite des Bildschirms geht
• Höhe des Rechtecks: 300px
• Der Hintergrund soll einen Farbverlauf darstellen
• Farbe Links: #00CCFF
• Farbe Rechts: #21007F
• Es soll ein beliebiger Text erscheinen – kopiere hierfür die Attributwerte aus o.g. Beispielcode für einen SVG-Farbverlauf
• Schiebe die fertige Datei auf den Backupserver

3. Aufgabe

Zeichne ein SVG mit einer Höhe von 300 und einer Breite von 600 und stelle in einer Polylinie den Aktienkurs der letzten 5 Jahre von SAP auf der gesamten Breite des SVG dar. Verwende hierfür insgesamt 12 Striche, welche durch die Vergabe der Koordinaten so angeordnet werden sollen, dass sie den Aktienkurs so realitätsnah, wie möglich abbilden.

Schiebe die fertige Datei auf den Backupserver.

Lösungen

Hier klicken