SVG - Farbverläufe
Farbverlauf bezieht sich auf einen reibungslosen Übergang einer Farbe zu einer anderen Farbe innerhalb einer Form. SVG bietet zwei Arten von Verläufen.
Linear Gradients - Repräsentiert den linearen Übergang einer Farbe zu einer anderen von einer Richtung in eine andere.
Radial Gradients - Repräsentiert den kreisförmigen Übergang einer Farbe zu einer anderen von einer Richtung in eine andere.
Lineare Farbverläufe
Erklärung
Es folgt die Syntaxdeklaration von <linearGradient>Element. Wir haben nur Hauptattribute gezeigt.
<linearGradient
gradientUnits ="units to define co-ordinate system of contents of gradient"
gradientTransform = "definition of an additional transformation from the gradient coordinate system onto the target coordinate system"
x1="x-axis co-ordinate"
y1="y-axis co-ordinate"
x2="x-axis co-ordinate"
y2="y-axis co-ordinate"
spreadMethod="indicates method of spreading the gradient within graphics element"
xlink:href="reference to another gradient" >
</linearGradient>Attribute
| Sr.Nr. | Name & Beschreibung |
|---|---|
| 1 | gradientUnits- Einheiten zur Definition des Koordinatensystems für die verschiedenen Längenwerte innerhalb des Verlaufs. Wenn gradientUnits = "userSpaceOnUse" ist, stellen Werte Werte im aktuellen Benutzerkoordinatensystem dar, die zum Zeitpunkt der Verwendung des Verlaufselements vorhanden sind. Wenn patternContentUnits = "objectBoundingBox" ist, stellen Werte Werte in Bruchteilen oder Prozentsätzen des Begrenzungsrahmens des referenzierenden Elements dar, die zum Zeitpunkt der Verwendung des Verlaufselements vorhanden sind. Standard ist userSpaceOnUse. |
| 2 | x1- x-Achsen-Koordinate des Gradientenvektors. Defeault ist 0. |
| 3 | y1- y-Achsenkoordinate des Gradientenvektors. Standard ist 0. |
| 4 | x2- x-Achsen-Koordinate des Gradientenvektors. Defeault ist 0. |
| 5 | y2- y-Achsenkoordinate des Gradientenvektors. Standard ist 0. |
| 6 | spreadMethod- Gibt die Methode zum Verteilen des Verlaufs innerhalb des Grafikelements an. Die Standardeinstellung ist "Pad". |
| 7 | xlink:href - wird verwendet, um auf einen anderen Gradienten zu verweisen. |
Beispiel
testSVG.htm<html>
<title>SVG Linear Gradient</title>
<body>
<h1>Sample SVG Linear Gradient</h1>
<svg width="600" height="600">
<defs>
<linearGradient id="sampleGradient">
<stop offset="0%" stop-color="#FF0000" />
<stop offset="100%" stop-color="#00FFF00" />
</linearGradient>
</defs>
<g>
<text x="30" y="50" >Using Linear Gradient: </text>
<rect x="100" y="100" width="200" height="200" stroke="green" stroke-width="3"
fill="url(#sampleGradient)" />
</g>
</svg>
</body>
</html>Ein <linearGradient> -Element, das als sampleGradient definiert ist.
In linearGradient werden zwei Offsets mit zwei Farben definiert.
Im Rect-Element wird im Fill-Attribut die URL des Verlaufs angegeben, um das Rechteck mit dem zuvor erstellten Verlauf zu füllen.
Ausgabe
Öffnen Sie textSVG.htm im Chrome-Webbrowser. Sie können Chrome / Firefox / Opera verwenden, um SVG-Bilder direkt ohne Plugin anzuzeigen. Internet Explorer 9 und höher unterstützt auch das Rendern von SVG-Bildern.
Radiale Farbverläufe
Erklärung
Es folgt die Syntaxdeklaration von <radialGradient>Element. Wir haben nur Hauptattribute gezeigt.
<radialGradient
gradientUnits ="units to define co-ordinate system of contents of gradient"
gradientTransform = "definition of an additional transformation from the gradient coordinate system onto the target coordinate system"
cx="x-axis co-ordinate of center of circle."
cy="y-axis co-ordinate of center of circle."
r="radius of circle"
fx="focal point for the radial gradient"
fy="focal point for the radial gradient"
spreadMethod="indicates method of spreading the gradient within graphics element"
xlink:href="reference to another gradient" >
</radialGradient>Attribute
| Sr.Nr. | Name & Beschreibung |
|---|---|
| 1 | gradientUnits- Einheiten zur Definition des Koordinatensystems für die verschiedenen Längenwerte innerhalb des Verlaufs. Wenn gradientUnits = "userSpaceOnUse" ist, stellen Werte Werte im aktuellen Benutzerkoordinatensystem dar, die zum Zeitpunkt der Verwendung des Verlaufselements vorhanden sind. Wenn patternContentUnits = "objectBoundingBox" ist, stellen Werte Werte in Bruchteilen oder Prozentsätzen des Begrenzungsrahmens des referenzierenden Elements dar, die zum Zeitpunkt der Verwendung des Verlaufselements vorhanden sind. Standard ist userSpaceOnUse. |
| 2 | cx- x-Achsen-Koordinate des Mittelpunkts des größten Kreises des Gradientenvektors. Defeault ist 0. |
| 3 | cy- y-Achsenkoordinate des Mittelpunkts des größten Kreises des Gradientenvektors. Standard ist 0. |
| 4 | r- Radius des Mittelpunkts des größten Kreises des Gradientenvektors. Defeault ist 0. |
| 5 | fx- Brennpunkt des radialen Gradienten. Standard ist 0. |
| 6 | fy- Brennpunkt des radialen Gradienten. Standard ist 0. |
| 7 | spreadMethod- Gibt die Methode zum Verteilen des Verlaufs innerhalb des Grafikelements an. Die Standardeinstellung ist "Pad". |
| 8 | xlink:href - wird verwendet, um auf einen anderen Gradienten zu verweisen. |
Beispiel
testSVG.htm<html>
<title>SVG Radial Gradient</title>
<body>
<h1>Sample SVG Radial Gradient</h1>
<svg width="600" height="600">
<defs>
<radialGradient id="sampleGradient">
<stop offset="0%" stop-color="#FF0000" />
<stop offset="100%" stop-color="#00FFF00" />
</radialGradient>
</defs>
<g>
<text x="30" y="50" >Using Radial Gradient: </text>
<rect x="100" y="100" width="200" height="200" stroke="green" stroke-width="3"
fill="url(#sampleGradient)" />
</g>
</svg>
</body>
</html>Ein <radialGradient> -Element, das als sampleGradient definiert ist.
In radialGradient werden zwei Offsets mit zwei Farben definiert.
Im Rect-Element wird im Fill-Attribut die URL des Verlaufs angegeben, um das Rechteck mit dem zuvor erstellten Verlauf zu füllen.
Ausgabe
Öffnen Sie textSVG.htm im Chrome-Webbrowser. Sie können Chrome / Firefox / Opera verwenden, um SVG-Bilder direkt ohne Plugin anzuzeigen. Internet Explorer 9 und höher unterstützt auch das Rendern von SVG-Bildern.