color
Voreinstellung: vom user agent abhängig.
Das Attribut color entspricht dem gleichnamigen Attribut
aus der CSS 2 Spezifikation. Es wird zur Zeit jedoch nicht unterstützt.
Verwenden Sie stattdessen die SVG-eigenen Eigenschaften fill und/oder
stroke.
color-interpolation
Voreinstellung: sRGB.
Mit Hilfe des Attributs color-interpolation können Sie
das Verhalten
des user agents bei der Farbberechnung beeinflussen. Mögliche Werte sind:
sRGB (Farbberechnung nach dem sRGB-Farbmodell),
auto (der user agent entscheidet) und
linearRGB (Farbberechnung nach dem linearen RGB-Farbmodell).
color-rendering
Voreinstellung: auto.
Durch das Attribut color-rendering können Sie
das Verhalten des user agents bei der Dastellung von Farbe oder Farbverläufen
beeinflussen.
Mögliche Werte sind auto,
optimizeSpeed und
optimizeQuality.
Der Wert auto errechnet automatisch einen
günstigen Mittelwert zwischen Qualität und Geschwindigkeit der Anzeige,
wo bei die Qualität etwas höher gewichtet wird. Mit
optimizeSpeed wird die Qualität verschlechtert und
die Geschwindigkeit der Anzeige erhöht. Der Wert
optimizeQuality bewirkt das Gegenteil - besser
Qualität, langsamere Darstellung.
Beispiel Quellcode
Grafische Darstellung:
SVG-Darstellung (nur SVG-fähige Browser!)
Screenshot JPG-Grafik
<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg" width="600" height="420"
xmlns:xlink="http://www.w3.org/1999/xlink">
<title>PresentationAttributes-Color</title>
<desc>Interpolation und Rendering - sehen Sie den Unterschied?</desc>
<defs>
<style type="text/css">
<![CDATA[
text {font-family:Verdana,sans-serif; font-size:14px; }
rect {fill:url(#g01);}
]]>
</style>
<linearGradient id="g01"
x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="1%" stop-color="blue" />
<stop offset="99%" stop-color="yellow" />
</linearGradient>
</defs>
<!-- 3 verschiedene Interpolationsarten -->
<rect x="170" y="20" width="120" height="160" />
<rect x="310" y="20" width="120" height="160"
color-interpolation="auto" />
<rect x="450" y="20" width="120" height="160"
color-interpolation="linearRGB" />
<!--3 verschiedene Rendering-Einstellungen -->
<rect x="170" y="220" width="120" height="160" />
<rect x="310" y="220" width="120" height="160"
color-rendering="optimizeSpeed" />
<rect x="450" y="220" width="120" height="160"
color-rendering="optimizeQuality" />
<text x="10" y="40" style="font-weight:bold;">color-interpolation</text>
<text x="175" y="200">sRGB</text>
<text x="315" y="200">auto</text>
<text x="455" y="200">linearRGB</text>
<text x="10" y="240" style="font-weight:bold;">color-rendering</text>
<text x="175" y="400">auto</text>
<text x="315" y="400">optimizeSpeed</text>
<text x="455" y="400">optimizeQuality</text>
</svg>
Im obigen Beispiel wird ein Rechteck, das mit einen Farbverlauf
(das nächste Kapitel: Verläufe und Muster)
gefüllt ist, jeweils mit 3 verschiedenen
Interpolationsarten und 3 unterschiedlichen Rendering-Einstellung
dargestellt.
Falls Sie keinen Unterschied in der Darstellung entdecken können -
der Autor auch nicht :-).
|