SVG/Farben/Verlaufsgitter

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Hinweis

Verlaufsgitter mit mesh, meshrow und meshpatch sind neu in SVG2 und noch nicht in die Browser implementiert.

Inhaltsverzeichnis

Um unregelmäßige, räumliche Objekte realistisch und lebensecht darstellen zu können, reichen eindimensionale Farbverläufe nicht aus. Verlaufsgitter (engl. mesh gradients) lassen Farben in verschiedene Richtungen und mit weichen Übergängen von einem Punkt zum anderen fließen. Sie basieren auf einem Array von Coons Patches. Ein Coons Patch ist eine Schattierung, die durch Farben an den Ecken einer durch vier Bézier-Kurven umschlossenen Fläche festgelegt wird. Die Farben dazwischen werden entweder bilinear oder bikubisch interpoliert.

einzelner Coons-Mesh patch
ein einzelner Coons-Mesh patch.


Ein Verlaufsgitter besteht aus einem Array, in dem ein Objekt in Reihen und diese in verschiedene Flicken aufgeteilt wird. Diese Aufteilung wird einerseits während des Entstehungsprozesses vollzogen, wenn ein Pfad in Unterbereiche aufgeteilt wird, andererseits können Daten durch gemeinsame Ränder und Eckpunkte kompakter dargestellt werden. Das Gitter kann in alle Richtungen verdreht und geformt werden.

Beispiel: Beispielstruktur
<mesh x="100" y="100">
  <meshrow>
    <meshpatch>
      <stop .../>
        max. vier stops im ersten Flicken
    </meshpatch>
    <meshpatch>
      beliebig viele Flicken in einer Reihe
    </meshpatch>
  </meshrow>
  <meshrow>
    beliebig viele Reihen, jede mit der gleichen Anzahl von Flicken wie in der ersten Reihe
  </meshrow>
</mesh>

Das erste meshpatch in der obersten meshrow enthält vier stop-Elemente. Diese Elemente entsprechen den oberen, rechten, unteren, und linken Ecken des ersten Flickens. Die folgenden Flicken in der ersten Reihe enthalten drei stop-Elemente, die den oberen, rechten und unteren Ecken entsprechen. Die linke, untere Ecke des Flickens entspricht der rechten Ecke des vorhergehenden Flickens. Der erste Flicken der nächsten Reihe enthält drei stop-Elemente für die rechte, untere und linke Ecke. Die obere linke Ecke wird von der unteren rechten Ecke des darübergelegenen Flickens übernommen. Die verbleibenden Flicken enthalten nur zwei Stops für die rechten und unteren Ecken des Flickens. Die obere Ecke wird vom Flicken drüber, die linke Ecke von vorherigen Flicken übernommen.

"Beispiel für ein Verlaufsgitter
Beispiel für ein Verlaufsgitter mit 2x2 Flicken und Reihen
Die Pfade der Stops wurden in einem Overlay dargestellt.


Jedes stop-Element enthält ein path-Attribut, das ein einzelnes 'c', 'C', 'l', oder 'L' Pfad-Kommando enthält. Ausgangspunkt für den Pfadbefehl ist der letzte Punkt der vorherigen Ecke des Flickens (für den ersten stop eines Flickens im Flicken zur Linken oder oben), außer für den ersten Flicken der ersten Reihe, der seine Koordinaten von den x- und y-Attributen des mesh-Elements erhält. Der Pfadbefehl des letzten stop-Elements eines meshpatch hat einen Punkt weniger als normal, da dieser „fehlende“ Punkt bereits vorher festgelegt wurde.

Für jedes stop-Element gibt es Angaben der Farbe und Deckkraft, die der der Ecke des Ausgangspunkts entspricht. Diese werden im stop durch die Eigenschaften stop-color und stop-opacity festgelegt, außer für den ersten Stop in allen weiteren Flicken, in denen diese Angaben schon im vorherigen Flicken festgelegt wurden.

Beispiel: Markup des oben dargestellten 2x2 Verlaufsgitters
<mesh x="50" y="50" id="example"> <!-- x, y legen Ausgangspunkt im ersten Flicken fest. -->
  <meshrow> <!-- keine Attribute, wird nur zum Festlegen der Reihen benötigt. -->
    <meshpatch>
      <stop path="c  25,-25  75, 25  100,0" stop-color="lightblue" />
      <stop path="c  25, 25 -25, 75  0,100" stop-color="purple" />
      <stop path="c -25, 25 -75,-25 -100,0" stop-color="red" />
      <stop path="c -25,-25, 25,-75"        stop-color="purple" /> <!-- Letzter Punkt nicht benötigt (geschlossener Pfad). -->
    </meshpatch>
    <meshpatch>
      <stop path="c  25,-25  75, 25  100,0" /> <!-- stop-color des vorherigen Flickens. -->
      <stop path="c  25, 25 -25, 75  0,100" stop-color="lightblue" />
      <stop path="c -25, 25 -75,-25"        stop-color="purple" /> <!-- Letzter Punkt nicht benötigt (geschlossener Pfad). -->
      <!-- Letzter Pfad (links unten) von rechts oben des vorherigen Pfads übernommen (with points reversed). -->
    </meshpatch>
  </meshrow>
  <meshrow> <!-- Neue Reihe. -->
    <meshpatch>
      <!-- Erster Pfad (oben links) vom unteren, rechten Pfad des oberen Flickens übernommen. -->
      <stop path="c  25, 25 -25, 75  0,100" /> <!-- stop-color des oberen Flickens. -->
      <stop path="c -25, 25 -75,-25 -100,0" stop-color="purple" />
      <stop path="c -25,-25, 25,-75"        stop-color="lightblue" /> <!-- Letzter Punkt nicht benötigt (geschlossener Pfad). -->
    </meshpatch>
    <meshpatch>
      <!-- erster Pfad (oben links) vom unteren, rechten Pfad des oberen Flickens übernommen. (with points reversed). -->
      <stop path="c  25, 25 -25, 75  0,100" /> <!-- stop-color des oberen Flickens. -->
      <stop path="c -25, 25 -75,-25"        stop-color="lightblue" /> <!-- Letzter Punkt nicht benötigt (geschlossener Pfad). -->
      <!-- Letzter Pfad (links unten) von rechts oben des vorherigen Pfads übernommen (with points reversed). -->
   </meshpatch>
  </meshrow>
</mesh>

[Bearbeiten] Elemente

[Bearbeiten] mesh

Mit dem mesh-Element legen Sie ein Verlaufsgitter fest.

  • SVG 2
  • Leer
  • Leer
  • Leer
  • Leer
  • Leer

Folgende Angaben sind nötig:

  • x: horizontaler Startpunkt
  • y: vertikaler Startpunkt
  • gradientUnits: definiert das Koordinatensystem für den Inhalt des Verlaufs-Elements [1]
    • userSpaceOnUse: übernimmt Werte aus dem existierenden Koordinatensystem, in das der Verlauf eingebunden ist.
    • objectBoundingBox: Standardwert, Koordinatensystem beginnt in der linken oberen Ecke des Elements und erstreckt sich auf die BoundingBox
  • transform: (optionale) Transformation
  • href: (optionaler) Verweis auf bestehendes Verlaufsgitter
  • type: Art der Interpolation zwischen den Punkten
    • bilinear: Standardwert, linear
    • bicubic: bikubisch
Beachten Sie: Anders als andere Verläufe und Muster werden mesh-Verlaufsgitter außerhalb von defs-Definitionsabschnitten gerendert.

[Bearbeiten] meshrow

Das meshrow-Element definiert eine Reihe eines Verlaufsgitters und enthält beliebig viele meshpatches. Es enthält keine Attribute, sondern wird nur zum Festlegen der Reihen benötigt.

  • SVG 2
  • Leer
  • Leer
  • Leer
  • Leer
  • Leer

[Bearbeiten] meshpatch

Das meshpatch-Element definiert einen Flicken eines Verlaufsgitters und enthält bis zu vier stops.

  • SVG 2
  • Leer
  • Leer
  • Leer
  • Leer
  • Leer

[Bearbeiten] stop

Wie in den einfacheren Verläufen auch, können Sie einen Color-Stop festlegen, der die Eigenschaften Farbe, deren Position und deren Transparenz setzt.

Beispiel
<stop offset="0%" stop-color="black" stop-opacity="100%" />

Folgende Angaben sind nötig:

  • path: Pfadangabe, die ein einzelnes 'c', 'C', 'l', or 'L' Pfad-Kommando enthält.
  • offset: (optional) regelt die Position der Farbe (erlaubte Werte 0-1 oder 0%-100%)
  • stop-color: setzt die Farbe
  • stop-opacity: regelt die Transparenz der Farbe (erlaubte Werte siehe offset)

[Bearbeiten] Quellen

  1. W3C: Attributes:gradientUnits

[Bearbeiten] Weblinks

[Bearbeiten] Siehe auch

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML