Zeichnen in SVG/SVG 2

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

2015 hoffte ich auf SVG 2 und viele neue Effekte für das Zeichnen in SVG. Ob sie jemals kommen, weiß man nicht.

stroke-align

Mit der Eigenschaft stroke-align können künftig die Ausrichtung der Randlinie bestimmt werden.

Folgende Werte wären möglich:

  • center: (Standardwert) Randlinie liegt mittig, Objekt wird um Randbreite größer
  • inside: die Randlinie liegt innen; Objekt vergößert sich nicht
  • outside: Randlinie liegt außen; Objekt wird um doppelte Randbreite größer

Beispiel für stroke-alignment und Werte

Hinweis:
Die Eigenschaft stroke-align ist noch nicht in die Browser implementiert. Bei der praktischen Umsetzung bei kreuzenden Linen und spitzen Ecken ist nicht klar, wie Umrandungen außerhalb des Pfades gerendert werden sollen.

Auch eine Umsetzung von unterschiedlich breiten Strichstärken, die einen hand-drawn-Effekt ermöglichen würden, scheitert an den komplexen - sich teilweise widersprechenden Anforderungen an einen solchen Algorithmus.

stroke-dashcorner

Hinweis:
Die Eigenschaft stroke-dashcorner ist neu in SVG2 und noch nicht in die Browser implementiert.

Mit der Eigenschaft stroke-dashcorner konnen künftig die Darstellung der gestrichelten Linie in den Ecken gestaltet werden.

Beispiel für Stroke-dashcorner

stroke-dashadjust

Hinweis:
Die Eigenschaft stroke-dashadjust ist neu in SVG2 und noch nicht in die Browser implementiert.

Mit der Eigenschaft stroke-dashadjust soll man künftig bestimmen, inwieweit das Muster einer Strichelung angepasst und wiederholt wird.

Folgende Angaben sind möglich:

  • none: Standardwert
  • stretch: Wenn das Muster nicht ganz in der Pfadlänge aufgeht, werden Striche und Lücken gestreckt
  • compress: Wenn das Muster nicht ganz in der Pfadlänge aufgeht, werden Striche und Lücken gestaucht
  • dashes: Wenn das Muster nicht ganz in der Pfadlänge aufgeht, werden Striche angepasst, Lücken bleiben in der gewählten Einstellung
  • gaps: Wenn das Muster nicht ganz in der Pfadlänge aufgeht, werden Lücken angepasst, Striche bleiben in der gewählten Einstellung

Beispiele für stroke-dashadjust