![]() |
![]() ![]() ![]() |
![]() |
||||||
![]() |
![]() |
![]() |
||||||
![]() |
Definition Beispiel Software Foren/Newsgroups/Mailinglisten |
Kontakt / Gästebuch |
||||||
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
|||
|
||||||||
![]() |
![]() |
|||||||
Tutorials
![]() |
![]() |
![]() SVG vs. HTML Ein Vergleich ![]() Bilder einbinden und konvertieren ![]() SVG-Dateien Übersicht ![]() |
![]() |
![]() Farbve ![]() ![]() |
rläufe ![]()
Beginnen wir mit einem einfachen Beispiel:
Zunächst wird der Farbverlauf <linearGradient> innerhalb des Definitions-Tags <defs> definiert: <defs> <linearGradient id="verl-hor" x1="0%" y1="0%" x2="100%" y2="0%" spreadMethod="pad"> <stop offset="0%" style="stop-color:lightyellow" /> <stop offset="100%" style="stop-color:#b6cde3" /> </linearGradient> </defs> Da der Verlauf horizontal ist, werden die Einstellungen an der x-Koordinate des Verlaufs vorgenommen: x1 wird auf 0% gestellt und x2 auf 100%. Die Y-Werte stehen beide auf 0%. Ginge der Verlauf von oben nach unten, müßte die zweite Y-Koordinate den Wert 100% bekommen. Die Farben in diesem Rechteck könnten jedoch auch diagonal verlaufen, also so:
stop-color In diesem Beispiel sind zwei Farben im Spiel: hellgelb (lightyellow) und hellblau (#b6cde3). Im ersten Beispiel ganz oben geht der Verlauf durch das gesamte Rechteck, also von 0 bis 100%. So wird also für das Gelb das offset bei 0% und für das Blau das offset bei 100% angesetzt: <stop offset="0%" style="stop-color:lightyellow" /> <stop offset="100%" style="stop-color:#b6cde3" /> Es geht jedoch auch anders:
<stop offset="0%" style="stop-color:lightyellow" /> <stop offset="40%" style="stop-color:#b6cde3" /> Übrigens können Sie einzelne Farben eines Verlaufs auch transparent gestalten:
<stop offset="40%" style="stop-color:#b6cde3;stop-opacity:0.6" /> Füllung Nun wollen Sie Ihren bisher ja nur definierten Farbverlauf auch anwenden und irgendwo einsetzen. In diesem Fall füllte ich also ein Rechteck damit: <rect x="0" y="0" width="100" height="50" style="fill:url(#verl-hor);stroke:black;stroke-width:1" /> Sie sehen, statt mit einer Farbe (fill:blue) füllen Sie die Form mit einem Verlauf: fill:url(#verl-hor). Hinter dem Gatter (#) steht die ID, die vorher dem Farbverlauf gegeben wurde. Sie könnten auch eine ganze Seite voller verschiedener Formen bauen und alle mit diesem einmal definierten Farbverlauf füllen. Auch Text kann mit einem Farbverlauf gefüllt werden. In diesem Beispiel verwende ich den selben Verlauf wie für das erste Rechteck oben:
Schöne Buttons Nehmen wir uns aber nun eines schöneren Beispiels an, eines Buttons im MacOS 10 Aqua-Look:
Schauen wir uns zunächst den Code für den Farbverlauf in Button Nr. 3 an: <defs> <linearGradient id="verlaufblau2" x1="0%" y1="0%" x2="0%" y2="100%" spreadMethod="pad"> <stop offset="0%" style="stop-color:#edf1ff" /> <stop offset="50%" style="stop-color:#203aac" /> <stop offset="100%" style="stop-color:#4993ea" /> </linearGradient> </defs> Es handelt sich also um drei verschiedene Farben: Ein dunkles Blau für die Mitte, ein helleres für den unteren und ein noch sehr viel helleres für den oberen Teil. Für den Verlauf in Button Nr. 4 habe ich nur zwei verschiedene Farben gewählt, in der Mitte ein helles Grau und oben und unten jeweils weiß: <defs> <linearGradient id="verlaufweiss" x1="0%" y1="0%" x2="0%" y2="100%" spreadMethod="pad"> <stop offset="0%" style="stop-color:white" /> <stop offset="50%" style="stop-color:#cccccc" /> <stop offset="100%" style="stop-color:white" /> </linearGradient> </defs> spreadMethod Bisher wurde in allen Beispielen spreadMethod="pad" verwendet. Dies ist der Default-Wert. Sie können jedoch auch spreadMethod="reflect" anwenden, dann wiederholt sich der Farbverlauf, wobei die fließenden Übergänge beibehalten werden:
Natürlich mußte ich noch etwas an beiden X-Koordinaten des Verlaufs herumspielen: <linearGradient id="IDvorhang" x1="50%" y1="0%" x2="60%" y2="0%" spreadMethod="reflect"> <stop offset="0%" style="stop-color:red" /> <stop offset="100%" style="stop-color:#444444" /> </linearGradient> Es gibt noch eine dritte Möglichkeit, spreadMethod="repeat":
Radiale Farbverläufe Das erste Beispiel zeigt einen Farbverlauf, der genau in der Mitte eines Kreises beginnt:
Im zweiten Beispiel habe ich das Zentrum/den Beginn des Verlaufs verschoben, und zwar mit fx="40%" und fy="20%". Wenn ich beide Werte auf 50% gesetzt hätte, gleichte das Ergebnis dem ersten Beispiel. Man kann also - wie oben zu sehen - die Attribute fx und fy weglassen, wenn man den Farbverlauf zentriert haben will.
Weiterer Unterschied zum ersten Kreis ist die Benutzung einer dritten Farbe in der Mitte des Verlaufs. Durch diese Anwendung einer Zwischenfarbe zwischen der hellsten und der dunkelsten Farbe wurde der in diesem Fall gewünschte Spotlight-Effekt etwas deutlicher. Der Kreis wird dann mit dem definierten Farbverlauf gefüllt: <circle cx="42" cy="40" r="35" fill="url(#grad-circ2)" /> Klar, natürlich können Sie auch in einem Kreis mit der spreadMethod spielen. Es gibt unzählige Möglichkeiten, herumzuspielen und kreativ zu sein. Dieser Artikel sollte Ihnen zunächst die Grundlagen vermitteln. |
![]() |
![]() |
||||||||||||||||||||
![]() |
||||||||||||||||||||||||
© 2001-2018 Petra Kukofka![]() eMail: kukofka@scale-a-vector.de ![]() |