SVG/ Grundformen

SVG:

Einführung Grundformen

Das Konzept von SVG besteht darin, für die Repräsentation von Inhalt zum einen Grundformen anzubieten, die häufig verwendet werden. Es kann auch Text graphisch repräsentiert werden, der aber weiterhin als Text lesbar im Quelltext des Dokumentes steht. Für allgemeine graphische Formen steht zum anderen ein allgemeines Element zur Verfügung, um beliebige Formen anzunähern.

Zumeist wird es sinnvoll sein, den graphischen Formen auch noch weitere Eigenschaften zuweisen zu wollen, etwa Farbe oder Eigenschaften des Randes. Dazu werden bevorzugt spezielle Attribute notiert, die nicht spezifisch für bestimmte Elemente sind, die als sogenannte Präsentationsattribute bei nahezu allen Elementen notiert werden können. Diese werden in einem anderen Abschnitt behandelt und hier nur verwendet, sofern für die Darstellung hilfreich oder notwendig.

Zunächst werden im folgenden Kapitel graphische Grundformen behandelt. Die Erstellung allgemeiner Pfade ist im Kapitel Pfade erklärt. Die Verwendung von Text als eine besondere Form von Pfaden, deren genaues Aussehen von der verwendeten Schriftart abhängt, ist im Kapitel Text als Graphik erläutert.

Element line, Linie


SVG
1.1	1.7	8	1.5	3.2	4	?	?	2

Linien mit SVG

Linienscharen mit einer kubischen Bézierkurve als Scharfunktion

Linien - genauer gesagt Strecken - werden in SVG durch das Element line beschrieben. Eine Linie hat keine flächige Ausdehnung und somit keine Füllung (siehe fill-Attribute), sie besteht nur aus dem Strich (siehe stroke-Attribute). Anders als die anderen Grundformen ist eine Linie also ohne Angabe einer geeigneten Kombination von Präsentationsattributen stroke* nicht sichtbar, siehe auch das Beispiel und das Kapitel 'Graphiken formatieren', in welchem Präsentationsattribute erläutert werden.

Attribute x1, y1, x2, y2

Eine Linie wird hierbei durch den Startpunkt mit den Attributen x1 und y1 und den Endpunkt mit den Attributen x2 und y2 spezifiziert. x1 und x2 sind also die x-Koordinaten, y1 und y2 die y-Koordinaten. Folglich ist der Wert eines jeden Attributes eine Koordinate.

Nicht angegebene Attribute x1, y1, x2, y2 werden als 0 angenommen. Die Attribute sind animierbar.

Beispiele Linie

 <?xml version="1.0" ?>
 <svg width="100" height="50" xmlns="http://www.w3.org/2000/svg">
   <line x1="5" y1="5" x2="95" y2="45" stroke="black" />
   <line x1="5" y1="45" x2="95" y2="5" stroke="black" />
 </svg>

Das Beispiel zeigt zwei sich überkreuzende Linien. Da Linien selbst keine flächige Ausdehnung haben, sind sie nur als Strich sichtbar und das auch nur, wenn wie hier das zugehörige Präsentationsattribut stroke explizit angegeben wird, hier mit dem Farbwert 'black', also schwarz.

Nun könnte vermutet werden, dass Linien alleine nicht besonders viel hergeben, schön dekoriert können aber bereits alleine mit ihnen reizvolle abstrakte Bilder erstellt werden: Linienscharen mit einer kubischen Bézierkurve als Scharfunktion.

LineElement W3C Referenz

Element rect, Rechteck


SVG
1.1	1.7	8	1.5	3.2	4	?	?	2

Einfaches Rechteck

Eine Schar von Rechtecken mit Farbverlauf, skaliert und rotiert

Ein einfaches Rechteck wird mit dem Element rect angegeben. Die Position der linken oberen Ecke in Form einer x- und einer y-Koordinate wird mit den Attributen x und y festgelegt. Breite und Höhe werden mit den Attributen width und height angegeben. Diese wenigen Angaben reichen bereits aus, um ein Rechteck darzustellen. Für eine willkürliche Ausrichtung ist dann allerdings das allgemein verfügbare Attribut transform zu verwenden, damit das Rechteck dann in die gewünschte Ausrichtung gedreht wird.

Beispiel: Eine Schar von Rechtecken mit Farbverlauf, skaliert und rotiert.

Attribute x und y

Die Attribute x und y geben die linke obere Ecke des Rechtecks (ohne Berücksichtigung möglicherweiser abgerundeter Ecken) im lokalen Koordinatensystem an. Der Wert ist jeweils eine Koordinate. x für die Position in x-Richtung, y für die Position in y-Richtung. Nicht angegebene x oder y entsprechen 0.

Die Attribute x, y sind animierbar.

Attribute width und height

width gibt die Breite und height die Höhe des Rechtecks im lokalen Koordinatensystem an. Der Wert ist jeweils eine Länge.

Nicht angegebene oder negative width oder height sind in SVG 1.1 ein Fehler, in SVG tiny 1.2 unterbindet dies die Darstellung, ebenso wie der Wert 0 in beiden Profilen.

Die Attribute width und height sind animierbar.

 <?xml version="1.0"?>
 <svg width="100" height="50" xmlns="http://www.w3.org/2000/svg">
   <rect x="20" y="5" width="60" height="10" />
 </svg>

Ohne weitere Angaben ist solch eine Grundform schwarz gefüllt. Dies kann durch die Angabe des Präsentationsattributes fill geändert werden, etwa fill="red".

Attribute rx und ry

Beispiel-SVG zur Verwendung des Elementes rect

Ein Rechteck kann auch abgerundete Ecken haben. Abgerundete Ecken werden durch die Angabe der Attribute rx und ry erreicht. Der Wert ist jeweils eine Länge. Dabei legt rx den Radius der Rundung in x-Richtung fest und ry in Richtung der y-Achse (genauer handelt es sich da um die Angaben zur Hälfte der Hauptachsen der Ellipsenbögen).

<rect x="10" y="10" width="20" height="50" rx="2" ry="3" />
<rect x="50" y="10" width="20" height="50" rx="2" />
<rect x="90" y="10" width="20" height="50" ry="2" />

Wird nur eines der Attribute rx und ry angegeben, wird das andere mit dem gleichen Wert angenommen. Überschreitet der Wert für den Radius den jeweiligen Wert für die halbe Höhe beziehungsweise Breite, so wird der Wert auf die halbe Höhe, beziehungsweise Breite reduziert.

In welcher Reihenfolge Korrektur und Übernahme des Wertes von rx und ry erfolgen, wird in folgendem Beispiel getestet. Wird etwas Rotes sichtbar, liegt beim verwendeten Darstellungsprogramm jedenfalls ein Implementierungsfehler vor: Beispiel-SVG zur Verwendung des Elementes rect. Genauere Angaben sind den Beschreibungen im Dokument zu entnehmen.

Die Attribute rx, ry sind animierbar.

W3C: rect

Element circle, Kreis


SVG
1.1	1.7	8	1.5	3.2	4	?	?	2

Einfacher Kreis

Schar von Kreisen mit Farbverlauf

Ein Kreis wird in SVG durch das Element circle repräsentiert. Auch wenn die Kreise lediglich eine Spezialform der Ellipse ist, besitzt SVG hierfür ein eigenes Element.

Attribute cx und cy

Der Kreismittelpunkt wird mit den Attributen cx und cy festgelegt. cx steht für die horizontale Koordinate im lokalen Koordinatensystem und cy für die vertikale Koordinate. Der Wert ist jeweils eine Koordinate.

Nicht angegebene cx oder cy werden als 0 angenommen. Die Attribute sind animierbar.

Attribut r

Der Radius des Kreises wird mit dem Attribut r angegeben. Der Wert ist eine Länge. 0 unterbindet die Anzeige des Kreises, in SVG 1.1 ist ein negativer Wert ein Fehler. In SVG tiny 1.2 wird ein negativer Wert in dem Sinne ignoriert, dass dort stattdessen die Voreinstellung 0 verwendet wird, welche die Anzeige des Kreises unterbindet.

Wird in SVG 1.1 der Radius nicht angegeben, so ist dies ein Fehler. In SVG tiny 1.2 unterbindet dies die Anzeige des Kreises.

Das Attribut ist animierbar.

Beispiele Kreis

 <?xml version="1.0"?>
 <svg width="100" height="150" xmlns="http://www.w3.org/2000/svg">
   <circle cx="50" cy="80" r="40" />
 </svg>

Schar von Kreisen mit Farbverlauf.

W3C: circle

Element ellipse, Ellipse


SVG
1.1	1.7	8	1.5	3.2	4	?	?	2

Einfache Ellipse

Ellipsenscharen

Eine Ellipse wird mit dem Element ellipse beschrieben.

Attribute cx und cy

Wie beim Kreis legen die Attribute cx und cy den Mittelpunkt fest. cx steht für die horizontale Koordinate im lokalen Koordinatensystem und cy für die vertikale Koordinate. Der Wert ist jeweils eine Koordinate.

Nicht angegebene cx oder cy werden als 0 angenommen. Die Attribute sind animierbar.

Attribute rx und ry

Eine Ellipse enthält zwei Attribute zur Angabe der halben Hauptachsen (auch Radien genannt), wobei die Hauptachsen immer in x- und y-Richtung des lokalen Koordinatensystems ausgerichtet sind. Eine andere Ausrichtung ist mit dem allgemeinen Attribut transform möglich. Zum einem gibt es für die Horizontale das Attribut rx und zum anderen für die Vertikale ry. Der Wert ist jeweils eine Länge.

Nicht angegebene oder negative rx und ry sind in SVG 1.1 ein Fehler. In SVG tiny 1.2 unterbinden sie die Darstellung des Elementes, ebenso wie in beiden Profilen der Wert 0. Die Attribute sind animierbar.

Beispiele Ellipse

 <?xml version="1.0"?>
 <svg width="60" height="100" xmlns="http://www.w3.org/2000/svg">
   <ellipse cx="30" cy="50" rx="20" ry="30" />
 </svg>

Ellipsenscharen

W3C ellipse

Element polyline, Linienzug


SVG
1.1	1.7	8	1.5	3.2	4	?	?	2

Beispiel-SVG zur Verwendung des Elementes polyline

Um einen Linienzug anzugeben, wird das Element polyline verwendet. Ein Linienzug besteht aus mehreren geraden Kurvenstücken, die aneinandergehängt werden. Die Form ist in der Regel offen. Für eine geschlossene Form wäre stattdessen das Element polygon zu verwenden. Selbst wenn der erste Punkt dem letzten entspricht, kann es je nach Verwendung von Präsentationsattributen Unterschiede in der Präsentation von polyline und polygon. Auch deshalb ist es bei geschlossenen Formen dringend zu empfehlen, polygon zu verwenden.

Attribut points

Dies Element hat ein spezifisches Attribut points. Der Wert dieses Attributes ist eine Liste von Koordinaten, die mit Leerzeichen separiert sind oder jeweils mit einem Komma mit optionalem Leerzeichen davor oder dahinter. Die Koordinaten sind reelle Zahlen, wissenschaftliche Notation ist zulässig. Ferner sind immer Koordinatenpaare anzugeben, erst ein Wert für die x-Richtung, dann einer für die y-Richtung. In SVG 1.1 ist die Angabe einer ungeraden Anzahl von Koordinaten ein Fehler. In SVG tiny 1.2 resultiert daraus, dass das Element nicht dargestellt wird, ebenso, wenn das Attribut gar keine Koordinaten enthält. Ansonsten ist die Darstellung dieselbe wie bei einem korrespondierenden Pfad.

Das Attribut points ist animierbar, jedoch nicht additiv und die Struktur des Attributwertes lässt keine sinnvolle Animation mit dem calcMode 'paced' zu. In SVG 1.1 ist es bedingt durch die Äquivalenz zu einem Pfad notwendig, für jeden Animationswert die gleiche Anzahl von Koordinatenpaaren anzugeben. In SVG tiny 1.2 kann aufgrund der gleichen Äquivalenz bei einer diskreten Animation auch die Anzahl der Koordinatenpaare variiert werden.

Beispiel Linienzug

<polyline points="200,50 200,100 400,400 100,200 50,200" />

Beispiel-SVG zur Verwendung des Elementes polyline

Element polygon, Polygon

Beispiel-SVG zur Verwendung des Elementes polygon


SVG
1.1	1.7	8	1.5	3.2	4	?	?	2

Um ein Polygon oder Vieleck, also einen geschlossenen Linienzug anzugeben, wird das Element polygon verwendet. Ein Polygon besteht aus mehreren geraden Kurvenstücken, die aneinandergehängt werden. Der letzte Punkt wird mit dem ersten durch ein gerades Kurvenstück verbunden. Es ist also nicht notwendig, den ersten Punkt als letzten zu wiederholen.

Attribut points

Dies Element hat ein spezifisches Attribut points. Der Wert dieses Attributes ist eine Liste von Koordinaten, die mit Leerzeichen separiert sind oder jeweils mit einem Komma mit optionalem Leerzeichen davor oder dahinter. Die Koordinaten sind reelle Zahlen, wissenschaftliche Notation ist zulässig. Ferner sind immer Koordinatenpaare anzugeben, erst ein Wert für die x-Richtung, dann einer für die y-Richtung. In SVG 1.1 ist die Angabe einer ungeraden Anzahl von Koordinaten ein Fehler. In SVG tiny 1.2 resultiert daraus, dass das Element nicht dargestellt wird, ebenso, wenn das Attribut gar keine Koordinaten enthält. Ansonsten ist die Darstellung dieselbe wie bei einem korrespondierenden Pfad.

Das Attribut points ist animierbar, jedoch nicht additiv und die Struktur des Attributwertes lässt keine sinnvolle Animation mit dem calcMode 'paced' zu. In SVG 1.1 ist es bedingt durch die Äquivalenz zu einem Pfad notwendig, für jeden Animationswert die gleiche Anzahl von Koordinatenpaaren anzugeben. In SVG tiny 1.2 kann aufgrund der gleichen Äquivalenz bei einer diskreten Animation auch die Anzahl der Koordinatenpaare variiert werden.

Beispiel Polygon

Als Beispiel ein Pentagramm (mit einigen Präsentationsattributen):

<polygon fill="#005" fill-opacity="0.7" fill-rule="evenodd"
stroke="#ccf" stroke-width="32" stroke-opacity="0.7"
stroke-miterlimit="30" stroke-linejoin="miter"
points="500,800 323.6644,257.2949 785.317,592.7051
214.683,592.7051 676.3356,257.2949"/>

(die Präsentationsattribute fill-opacity und stroke-opacity sind in SVG tiny 1.1 nicht verfügbar, in SVG tiny 1.2 schon.)

Beispiel-SVG zur Verwendung des Elementes polygon

Exkurs Polygone malen

SVG bietet einmal abgesehen vom Element rect keine weiteren Elemente zum Malen spezieller, benannter Polygone. Der Autor muss sich also selbst darum kümmern, an die Koordinaten der Ecken seines Polygons zu gelangen.

Programme wie Inkscape bieten eine graphische Oberfläche, wo insbesondere symmetrische Polygone wie die regulären (konvexen) und sogenannte Sterne mit vorgefertigten Funktionen gemalt werden können. Bei Inkscape wie bei zahlreichen anderen Programmen ist das Resultat dann allerdings ein allgemeiner Pfad, kein polygon-Element (was hinsichtlich der Qualität solcher Programme Fragen aufwirft, die hier aber nicht diskutiert werden müssen).

So oder so sind die Möglichkeiten solcher Programme, einem Autor zu helfen, spezielle Polygone zu malen, recht beschränkt, insofern ist es naheliegend, ein kleines eigenes Programm oder Skript zu schreiben, welches die Koordinaten berechnet und als Zeichenkette entsprechend dem Attributwert von points ausgibt. Dazu sollen im Folgenden ein paar einfache Beispiele betrachtet werden.

Reguläre (konvexe) Polygone

Reguläre (konvexe) Polygone zeichnen sich dadurch aus, dass sie gleichseitig sind und zwischen allen benachbarten Seiten der gleiche Winkel auftaucht. Zusätzlich handelt es sich um einen Linienzug, der durch die Verbindung einer Liste von Koordinatenpaaren mit den Ecken erstellt werden kann.

Die Koordinaten (x,y) der Ecken eines solchen regulären (konvexen) Polygons lassen sich wie folgt bestimmen, wobei r als der Radius vom Mittelpunkt (cx,cy) des Polygons zu einer Ecke definiert sei und n > 2 die Anzahl der Ecken angibt. Die i-te Ecke, i von 0 bis n-1 mit einem beliebigen Winkel φ der nullten Ecke zur x-Achse, hat dann folgende Koordinaten:

x(i) = cx + r cos(2Π i/n + φ)
y(i) = cy + r sin(2Π i/n + φ)

Ganz allgemein ist eine Fläche konvex, wenn die Verbindungslinie zwischen zwei beliebigen Punkten der Fläche komplett in der Fläche liegt, jeweils einschließlich dem Rand.

Reguläre (konvexe) Polygone

Allgemeine reguläre Polygone

Sternpolygone

Wird die Forderung zur Konvexität weggelassen, ergibt sich mit einem weiteren ganzzahligen Parameter 0 < m < n/2 eine allgemeinere Formel für reguläre Polygone, die echte Sternpolygone einschließt, bei diesen überschneiden sich verschiedene Ränder. Sinnvollerweise werden zudem m und n teilfremd gewählt (abgesehen vom Fall m=1, welcher die konvexen Polygone beschreibt), sonst ist das Ergebnis erneut ein reguläres Polygon, bei dem jedoch die Ecken mehrfach notiert sind.

x(i) = cx + r cos(2Π i m/n + φ)
y(i) = cy + r sin(2Π i m/n + φ)

Sternpolygone

Man beachte: Mit obiger Formel lassen sich Sterne wie etwa der Davidsstern nicht darstellen. Will man diesen mit einem Element polygon darstellen, ist es notwendig, alle Schnittpunkte oder Ecken einzeln zu bestimmen und diese in einer bestimmten Reihenfolge zu verbinden. Meist wird man den Davidsstern allerdings lieber mit zwei gleichseitigen Dreiecken bilden wollen, die gegeneinander verdreht sind. Weil mit polygon keine weiteren Unterpfade notiert werden, ist dafür dann also auf das Element path auszuweichen. Anloges gilt natürlich für andere Sterne dieses Typs, etwa gegeneinander verdrehte Quadrate, Fünfecke etc.

Spiegelstern

Spiegelsterne

Was gemeinhin unter dem Begriff 'Stern' bei einer graphischen Form verstanden wird, ist nicht scharf definiert. Zumeist hat dies eine niedrigere Symmetrie, etwa indem zwei oder mehr Radien oder Winkel im Wechsel vorkommen. Eine Variante ist zum Beispiel, was in diesem Zusammenhang einmal ein Spiegelstern getauft werden soll, weil er Spiegelachsen aufweist):

x(i,1) = cx + r(1) cos(2Π i m/n + φ)
y(i,1) = cy + r(1) sin(2Π i m/n + φ)
x(i,2) = cx + r(2) cos(2Π (i+0.5) m/n + φ)
y(i,2) = cy + r(2) sin(2Π (i+0.5) m/n + φ)

Dabei stehen 1 und 2 jeweils für die verschiedenen Radien. Oft wird nur m = 1 verwendet, die anderen sind aber auch erwähnenswert. Insbesondere bei einer geraden Anzahl von Radien ergeben sich interessante Figuren.

Die Koordinatenpaare werden dann abwechselnd notiert, sinngemäß so:

points=" x(0,1), y(0,1) x(0,2), y(0,2) x(1,1), y(1,1), x(1,2), y(1,2) x(2,1), y(2,1), x(2,2), y(2,2) x(3,1), y(3,1), x(3,2), y(3,2) x(4,1), y(4,1), x(4,2), y(4,2) ..."

Spiegelsterne

Drehstern

Drehsterne

Die Spiegelachsen dieser Sterne können vermieden werden, wenn zwei verschiedene Winkel φ angegeben werden. Es verbleibt nur noch eine diskrete Drehsymmetrie, dieser Typ sei hier kurzerhand Drehstern getauft:

x(i,1) = cx + r(1) cos(2Π i m/n + φ(1))
y(i,1) = cy + r(1) sin(2Π i m/n + φ(1))
x(i,2) = cx + r(2) cos(2Π i m/n + φ(2))
y(i,2) = cy + r(2) sin(2Π i m/n + φ(2))

Drehsterne

Allgemeiner Stern

Oftmals sind auch Sterne zu sehen, die weder eine strenge Drehsymmetrie, noch Spiegelachsen aufweisen. Damit die Formel auch diese beschreiben kann, wird zum Radius einer jeden Ecke eine Zufallszahl addiert, deren Betrag sinnvollerweise kleiner ist als der durchschnittliche Radius. Ähnlich kann auch zum Winkel φ einer jeden Ecke ein kleiner Zufallswinkel hinzuaddiert werden, dessen Betrag sinnvollerweise kleiner ist als die durchschnittliche Differenz der Winkel zwischen zwei benachbarten Ecken.

x(i,1) = cx + r(i,1) cos(2Π i m/n + φ(i,1))
y(i,1) = cy + r(i,1) sin(2Π i m/n + φ(i,1))
x(i,2) = cx + r(i,2) cos(2Π i m/n + φ(i,2))
y(i,2) = cy + r(i,2) sin(2Π i m/n + φ(i,2))

Leicht lassen sich andere Modifikationen und Variationen zu den Formeln finden, um weitere interessante Polygone berechnen lassen zu können.

Stern mit vorgegebenem Spitzenwinkel

Stern mit vorgegebenem Spitzenwinkel, Parameter

Umrandung eines Pentagramms als Beispiel für die Umrandung eines nicht konvexen regulären Polygons

Während bei den vorherigen Beispielen immer die Radien eines Sterns vorgegeben sind, kommt es beim 'Spiegelstern' getauften Stern auch oft vor, dass der Spitzenwinkel vorgegeben ist, also der Winkel an einer Strahlspitze, woraus sich dann automatisch das Verhältnis der beiden beteiligten Radien ergibt.

Ist n die Anzahl der Strahlen größer als 0, so ist (in Einheiten einer vollen Drehung, das wird in diesem Abschnitt immer als Einheit für Winkel verwendet) der Winkel zwischen zwei Strahlen w= 1/n (im folgenden Beispiel Strahlenwinkel genannt).

Sei R der Radius eines Strahls und r der Radius mittig zwischen zwei Strahlen.

Sei s der gegebene Spitzenwinkel größer als 0, so ergibt sich, falls s+w keine ganze Zahl ist:

r/R = sin(πs)/sin(π(s+w))

Ist s+w eine ganze Zahl, so handelt es sich nicht um einen Typ von Stern, der sinnvoll durch eine endlich große Figur beschrieben werden kann.

Zu erkennen ist dabei, dass bei besonderen Spitzenwinkeln r größer als R werden kann, Außen- und Innenspitze tauschen dabei also die Rollen.

Ist sin(πs) = sin(π(s+w)), ergibt sich offenbar r=R, also ein reguläres Polygon mit 2n Ecken.

Stern mit vorgegebenem Spitzenwinkel, Parameter

Umrandung eines Pentagramms als Beispiel für die Umrandung eines nicht konvexen regulären Polygons

Spezielle Untertypen dieser Sternfamilie mit zwei Radien werden oft auf Flaggen oder in der Heraldik verwendet. Dies ist die äußere Umrandung eines nicht konvexen, regulären Polygons, etwa eines Pentagrammes. Solch ein nicht konvexes, reguläres Polygon wird durch eine weitere Zahl bestimmt. Während bei einem konvexen regulären Polygon jeweils mit der nächsten Ecke verbunden wird, wird bei diesem nicht konvexen Typ eine der nächsten Ecken verwendet, die zweite Zahl d gibt dann an, zur wievielte Ecke gesprungen werden soll. Ohne Einschränkung der Allgemeinheit soll hier d kleiner oder gleich n/2 betrachtet werden, bei größeren gibt es allenfalls eine Umkehrung der Drehrichtung bei der Erzeugung des Polygons, kein neues Polygon (und die folgende Formel ist sinngemäß anzupassen).

Jedenfalls ergibt sich der Spitzenwinkel dieses speziellen Untertyps dann zu:
s=(1-2d/n)/2.

Dies schließt übrigens auch die Umrandung ähnlicher Sterne ein, zu denen der Davidsstern gehört, diese Sterne bestehen dann anders als die nicht konvexen regulären Polygone aus mehreren Unterpfaden, haben aber eine ähnliche Erscheinung.. Für die Umrandung des Davidssterns wäre zum Beispiel einfach n=6, d=2 zu wählen, also s=1/6.

Für den häufig auf Flaggen zu findenden fünfzackigen Stern, der der Umrandung eines Pentagramms entspricht, gilt demzufolge n=5, d=2, s=0.1.

Facettierter Stern

Facettierter Stern mit sieben Strahlen; Spitzenwinkel 36 Grad

Bei einem facettierten Stern wird durch unterschiedliche Farbgebung jeweils der Hälfte der radial geteilten Strahlen ein dreidimensionaler Effekt naiv vorgetäuscht. Vom Zentrum aus gesehen wird jeweils jede linke Hälfte der Strahlen in einer Farbe dargestellt, die jeweils rechte Hälfte in einer anderen. Zusätzlich oder stattdessen können auch die radialen Linien zu den Eckpunkten des Sterns mit sichtbaren Strichen versehen werden. Durch die farbliche Änderung bleibt so die diskrete Drehsymmetrie des Sterns erhalten, es gibt aber keine Spiegelachsen mehr.

Um einen facettierten Stern zu realisieren, ist zusätzlich zu den Eckpunkten eines Sterns mit vorgegebenem Spitzenwinkel noch das Zentrum als Punkt zu berücksichtigen. Durch Verbindung des Zentrums und der Eckpunkte in geeigneter Reihenfolge kann so eine Facette als Polygon notiert werden. Die andere Facette wird einfach durch eine andere Reihenfolge der Verbindung der Punkte erreicht. So besteht der facettierte Stern also mindestens aus zwei Polygonen, die zusammen den Stern bilden. Dann kann es noch vorteilhaft sein, die Umrandung des Sterns und die zentralen Striche getrennt zu notieren und sichtbar über den Verbindungslinien der beiden Facetten anzuordnen, um Artefakte durch Rundungsfehler des Darstellungsprogrammes zu kaschieren.

Sinngemäß können so natürlich auch andere Sterne, insbesondere solche mit diskreter Drehsymmetrie, facettiert werden.

Interessanter Trick bei der Beispieldatei: Die Striche werden zusammen in einem Element g notiert, auf welches die Eigenschaft opacity angewendet wird. So kann erreicht werden, dass trotz der Überlappung der Striche eine einheitliche Transparenz ähnlich wie bei einem einzigen Pfad erreicht wird, zudem kann so der Strich für den facettierten Stern für beide Facetten gemeinsam ausgeführt werden, ohne dass die später notierte Facette den Strich der früher notierten teilweise überdeckt.

SVG: