Besucher
Online:
25
Besucher heute:
777
Besucher gesamt:
1.234.187
Zugriffe heute:
2.773
Zugriffe gesamt:
5.409.097
Besucher pro Tag: Ø
388
Zählung seit:
 01.01.2011

Brauerei FAQ

Wie erstelle ich Design-Vorlagen mit mehreren Farbvarianten?

Zunächst wird eine normale Designvorlage wie beschrieben entworfen. Dabei werden die Füll- und/oder Umrandungsfarben der Elemente, deren Farben wählbar sein sollen, nicht direkt angegeben, sondern durch zuweisung einer css class, die im svg stylesheet definiert ist.

<defs>
<style type="text/css">
...
  .f1 { fill: #320000; }
.f2 { fill: #e01010; }
.s1 { stroke: #e01010; }
</style>
...
</defs>
...
<rect class="f1" x="0" y="0" width="600" height="850" />
<line class="s1" x1="25" y1="400" x2="575" y2="400" stroke-width="5" /> 
...

Die stroke und fill Farben müssen dabei jeweils getrennt in einer class definiert werden, eine Kombintion von stroke und fill in einer class Definition ist nicht möglich. Es können aber in einem svg Element mehrere Klassen angegeben werden (wie üblich durch Komma getrennt). Diese Definition sorgt zunächst dafür, dass die im svg stylesheet vordefinierten Farben verwendet werden.

Das gesamte svg Object wird jetzt noch in den tag coloredSvg eingebettet und eine Definition der Farbschemata vorangestellt.

<coloredSvg>
<colorSchemes>
<colorSchema id="cs1" name="rot" f1="#320000" f2="#e01010" s1="#e01010" />
<colorSchema id="cs2" name="grün" f1="#003200" f2="#7fff00" s1="#7fff00" />
<colorSchema id="cs3" name="blau" f1="#000032" f2="#7fff00" s1="#7fff00" />
</colorSchemes>
<svg width="600" height="850"  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink">
...
 </svg>
</coloredSvg> 

Die Definition der Farbschemata im tag colorSchemes enthält für jede Farbvariante ein colorSchema Object, dass die jeweilige Variante der Füllfarben (f) und der Umrandungsfarben (s) als Attribute enthält. Die Farben können als Hexadezimalwert (mit vorangestelltem #) oder als Farbnamen angegeben werden angegeben werden.

Der Inhalt des name tag wird später in der Farbschema-Auswahlbox des Etikettendesigners angezeigt. Der id tag besteht aus dem Präfix cs und einer fortlaufenden Zahl.

Zur Zeit sind maximal 3 Füll- und 3 Umrandungsfarben pro Farbvariante möglich. Die Anzahl der Farbvarianten ist nicht begrenzt. Als Beispiel für eine Designvorlage mit mehreren Farbvarianten kann das Western Etikett dienen.

Zuletzt aktualisiert am 08.08.2011 von Müggelland.

Zurück