Beispiele zum linearGradient-Tag
(Auszug aus "Das Einsteigerseminar SVG — Webgrafiken mit XML" von Helma Spona)
Zur Demonstration der Attribute und ihrer Auswirkungen soll ein kleines Beispiel dienen, das fünf verschiedene Farbverläufe erzeugt. Das Ergebnis zeigt die folgende Abbildung. Die schwarzen Linien stellen die virtuellen Verlaufspfade dar, die mit den Attributen x1/y1 und x2/y2 definiert werden.
Abbildung: Verschiedene lineare Farbverläufe.
Zunächst wird dazu ein einfacher, linearer Farbverlauf von Gelb über Orange nach Rot definiert, für den keine weiteren Attribute festgelegt werden. Dieser Farbverlauf wird dann gleich als Erstes zum Füllen eines Quadrats verwendet. Dieser erste Verlauf bekommt den Name "verlauf" und wird von den nachfolgenden Verlaufsdefinitionen als Basis verwendet. Dazu erhalten die anderen Farbverläufe das xlink:href-Attribut mit dem Wert #verlauf: xlink:href="#verlauf". Die Unterschiede der einzelnen Verläufe werden nur mit den Attributen der Farbverläufe verlauf01 bis verlauf05 definiert.
<?xml version="1.0" standalone="no"?>
...
<svg width="500" height="500" style="font-stretch:condensed;font-size:12">
<defs>
<linearGradient id="verlauf">
<stop offset="0%" style="stop-color:yellow;stop-opacity:1"/>
<stop offset="50%" style="stop-color:orange;stop-opacity:0.8"/>
<stop offset="100%" style="stop-color:red;stop-opacity:1"/>
</linearGradient>
<linearGradient id="verlauf01" gradientUnits="ObjectBoundingBox" x1="10%" y1="30%" x2="90%" y2="90%" xlink:href="#verlauf"></linearGradient>
<linearGradient id="verlauf02" gradientUnits="userSpaceOnUse" x1="50" y1="60" x2="90" y2="90" xlink:href="#verlauf"></linearGradient>
<linearGradient id="verlauf03" gradientUnits="ObjectBoundingBox" spreadMethod="pad" x1="30%" y1="50%" x2="70%" y2="50%" xlink:href="#verlauf"></linearGradient>
<linearGradient id="verlauf04" gradientUnits="ObjectBoundingBox" spreadMethod="reflect" x1="30%" y1="50%" x2="70%" y2="50%" xlink:href="#verlauf"></linearGradient>
<linearGradient id="verlauf05" gradientUnits="ObjectBoundingBox" spreadMethod="repeat" x1="30%" y1="50%" x2="70%" y2="50%" xlink:href="#verlauf"></linearGradient>
</defs>
<g transform="translate(10,10)">
<rect x="0" y="0" width="100" height="100" style="fill:url(#verlauf)"/>
<circle cx="0" cy="0" r="3" />
<circle cx="100" cy="0" r="3" />
<path d="M0 0 L100 0" style="stroke:black"/>
<text x="110" y="40">Einfacher Verlauf mit Stopp-Positionen bei 0%, 50% und 100%</text>
</g>
<g transform="translate(10,120)">
<rect x="0" y="0" width="100" height="100" style="fill:url(#verlauf01)"/>
<circle cx="10" cy="30" r="3" />
<circle cx="90" cy="90" r="3" />
<path d="M10 30 L90 90" style="stroke:black"/>
<text x="110" y="40">Verlauf mit Stopp-Positionen bei 0%, 50% und 100%</text>
<text x="110" y="60">gradientUnits=ObjectBoundingBox</text>
<text x="110" y="80">Verlauf von 10%/30% zu 90%/90%</text>
</g>
<g transform="translate(10,230)">
<rect x="0" y="0" width="100" height="100" style="fill:url(#verlauf02)"/>
<circle cx="50" cy="60" r="3" />
<circle cx="90" cy="90" r="3" />
<path d="M50 60 L90 90" style="stroke:black"/>
<text x="110" y="40">Verlauf mit Stopp-Positionen bei 0%, 50% und 100%</text>
<text x="110" y="60">gradientUnits=userSpaceOnUse,</text>
<text x="110" y="80">Verlauf von 50/60 zu 90/90</text>
</g>
<g transform="translate(10,340)">
<rect x="0" y="0" width="100" height="100" style="fill:url(#verlauf03)"/>
<circle cx="30" cy="50" r="3" />
<circle cx="70" cy="50" r="3" />
<path d="M30 50 L70 50" style="stroke:black"/>
</g>
<g transform="translate(120,340)">
<rect x="0" y="0" width="100" height="100" style="fill:url(#verlauf04)"/>
<circle cx="30" cy="50" r="3" />
<circle cx="70" cy="50" r="3" />
<path d="M30 50 L70 50" style="stroke:black"/>
</g>
<g transform="translate(230,340)">
<rect x="0" y="0" width="100" height="100" style="fill:url(#verlauf05)"/>
<circle cx="30" cy="50" r="3" />
<circle cx="70" cy="50" r="3" />
<path d="M30 50 L70 50" style="stroke:black"/>
<text x="110" y="10">Verlauf mit Stopp-Positionen bei:</text>
<text x="110" y="30">0%, 50% und 100%</text>
<text x="110" y="50">gradientUnits=ObjectBoundingBox,</text>
<text x="110" y="70">Verlauf von 30%/50% zu 70%/50%</text>
<text x="110" y="90">spreadMethod: pad - reflect - repeat</text>
</g>
</svg>
Die untere Reihe Verläufe in der Abbildung zeigt den gleichen Verlauf, lediglich mit anderen Werte für das Attribut spreadMethod. Von links nach rechts werden die Werte pad, reflect und repeat verwendet.
| << zurück | vor >> |
| Tipp der data2type-Redaktion: Zum Thema SVG bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an: |
Copyright © verlag moderne industrie GmbH 2001
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "Das Einsteigerseminar SVG — Webgrafiken mit XML" denselben Bestimmungen wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.
verlag moderne industrie GmbH, Justus-von-Liebig-Straße 1, D-86899 Landsberg/Lech, fon ++49 (0) 81 91 / 125 – 0, leserservice(at)mi-verlag.de