SVG/Anwendung und Praxis/Schrift von Zauberhand

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Text in SVG hat den Vorteil, dass er einerseits wirklich aus Text besteht, aber andererseits doch grafisch verändert und animiert werden kann. Ein besonders attraktives Beispiel ist die Schrift von Zauberhand, die wie aus dem Nichts auf dem Bildschirm erscheint. In diesem Artikel wollen wir Ihnen die Voraussetzungen vorstellen und welche praktischen Probleme dabei aufgetreten sind.

Inhaltsverzeichnis

[Bearbeiten] Vorüberlegungen

[Bearbeiten] Laufende Linien

Eine Spezialität von SVG sind animierte Randlinien; auf Englisch auch line-drawing genannt. In diesem einfachen Beispiel wird ein Ladebalken animiert.

Beispiel ansehen …
#linie {
  stroke: #3983ab;
  stroke-width: 10px;
  stroke-dasharray: 30 10;
  animation: strokeAni .7s infinite linear;
}
 
@keyframes strokeAni {
  0% {
    stroke-dashoffset: 40;
  }
  100% {
  stroke-dashoffset: 0;
  }
}
  <path id="linie" d="m20,100 h600" />
  <path d="m620,80 v40 l20,-20z" fill="#3983ab"/>
Die Linie besteht aus einem Pfad, der mit mit der Eigenschaft stroke-dasharray einen gestrichelten Rand erhält. In der Animation strokeAni wird der Beginn des Randes verschoben, sodass es aussieht, als ob die Striche sich bewegen.


Wenn Sie die gestrichelte Line mit einem hohen Wert für stroke-dasharray versehen und diesen dann mit stroke-dashoffset so weit verschieben, dass sie ursprünglich nicht sichtbar ist, können Sie den Eindruck erwecken, dass das SVG-Objekt gerade gezeichnet wird.

Beispiel ansehen …
path {
  stroke: #c32e04;
  fill: none;
  stroke-width: 3px;
  stroke-dasharray: 900 900;
  animation: strokeAni 5s infinite linear;
}
 
@keyframes strokeAni {
	0% {
		stroke-dashoffset: 900;
	}
	100% {
		stroke-dashoffset: 0;
	}
}
<path d="M200,350 v-100 l-50,-51 l-50,52 h100 l-100,100 v-100 l100,100 h-100" />
Die Randlinie hat eine Strichelung, deren Wert mit stroke-daharray festeglegt wird. Der Wert von 900 ist so hoch, dass die Strichelung länger als der Umriss des Hauses ist. Da er zu Beginn der Animation mit stroke-dashoffset um 900px verschoben wurde, erscheint der Rand allmählich und es entsteht ein Zeicheneffekt.


[Bearbeiten] Schrift in Pfade umwandeln

Leider gibt es keinen Königsweg Schrift zu vektorisieren. In Programmen wie Inkscape können Sie Text mit

Objekt > Objekt in Pfad umwandeln

vektorisieren. Allerdings werden Buchstaben hier nicht zu geschwungenen Linien, sondern als Flächen dargestellt, deren Rand dann doch wieder nur die Kontur der Buchstaben darstellt.

ToDo (weitere ToDos)

praktischer Tipp gesucht, wie man Text in einzelne Linien umwandelt. --MScharwies (Diskussion) 06:45, 23. Mär. 2016 (CET)

[Bearbeiten] Anwendungsbeispiel

[Bearbeiten] erster Versuch

Beispiel ansehen …
  <path d="M20,30 c-5,30 5,60 0,90 m30,-33 a16,16 1 1,0 0,33 c30,0 35,-50 35,-77  s-25,-10 -25,10 0,15 
           10,33 20,15 15,35 
           m60,-90 c-5,30 5,60 0,90 m17,-50 c0,-5 5,-5 10,0 s0,10 0,10 s-5,5 -12,-7 
	   m0,20 v20 c0,8 20,5 30,-10 s -5,-10 -10,0 0,20 25,10 c10,-10 15,-20 10,-50 s-10,-10 -12,0    
           0,20 13,40 c10,-10 20,-20 20,3 s -10,10 -20,3
	   m28,-0 c10,0 20,-20 10,-20 c0,0 -5,-0 -10,5 s0,20 10,22 s5,0 10,-3 
           ..." 
         stroke="black" stroke-width="3" fill="none"  
         stroke-dasharray="600 600" stroke-dashoffset="0">
     <animate 
	     attributeName="stroke-dashoffset" 
	     attributeType="XML"
             from="600" to="0" 
	     dur="20s"  
	     repeatCount="indefinite" />
  </path>
Die von Hand vektorisierte Schrift wird nun analog zu den bisherigen Beispielen mit einer gestrichelten Kontur versehen, die durch stroke-dashoffset außerhalb des sichtbaren Fläche positioniert ist und erst durch die Animation hereingeschoben wird.


Fazit:

Der Pfad wird vom Browser nicht als ein einheitlicher Pfad gesehen, sondern setzt bei jedem moveTo wieder neu an.

Eine mögliche Lösung stellt Ian Yates vor, der seine, zugegeben kürzere, Unterschrift in verschiedene Pfade teilt und diese mit CSS animiert.[1]

[Bearbeiten] Berechnen der Pfadlänge

Um die verschiedenen Pfade nacheinander zu animieren, benötigen wir eine exakte Länge. Dies können Sie mit der JavaScript-Methode getTotalLength() auslesen.

Beispiel
var path = document.querySelector('.handschrift');
path.getTotalLength();


[Bearbeiten] zweiter Versuch

ToDo (weitere ToDos)

  • Pfade aus 1. Beispiel einzeln notieren
  • Länge auslesen
  • einzeln animieren
--MScharwies (Diskussion) 06:45, 23. Mär. 2016 (CET)


[Bearbeiten] Alternative: Text schrittweise einblenden

Wenn Sie, wie im verlinkten Beispiel Füllung und Kontur von transparent auf farbig ändern würden, könnten Sie einen einzeiligen Text von links nach rechts sichtbar werden lassen. Es hätte zwar nicht ganz den beabsichtigten Effekt, wäre aber eine einfachere Alternative.

[Bearbeiten] Alternativen mit Frameworks

[Bearbeiten] vivus-Framework

Dennis Potschien stellt in diesem Artikel das vivus-Framework[2] vor, mit dem beliebige Formen in Pfade umgewandelt und dann gezeichnet werden.[3]

[Bearbeiten] DrawSVG

DrawSVG für jQuery – animierte Pfade beleben deine Website.[4]

[Bearbeiten] Quellen

  1. ref:tutsplus: sign-on-the-dotted-line-animating-your-own-svg-signature-
  2. maxwellitto.github: vivus
  3. drweb.de: Flexibel: Vivus-Framework animiert SVG mit JavaScript
  4. drweb.de: DrawSVG für jQuery – animierte Pfade beleben deine Website

[Bearbeiten] Weblinks

[Bearbeiten] Line-Animation

[Bearbeiten] Convert Text to Path in Inkscape

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML