SVG/Farben/Schraffuren

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Hinweis

Diese Elemente sind neu in SVG2. Sie werden von Browsern noch nicht unterstützt!

In SVG2 kommen neben den vorhandenen Verläufen und Mustern noch Schraffuren (engl. hatching) dazu.[1] Mit dem hatch-Element können Sie feinere Muster als mit pattern erzeugen und so schraffierte oder gravierte Flächen noch detailgetreuer darstellen.

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

Folgende Eigenschaften sind möglich:

  • x, y: Koordinaten des Anfangspunkts
  • pitch: Distanz zum Endpunkt
  • rotate: Winkel des pitchs
  • hatchUnits: setzt das Koordinatensystem für x, y, pitch und rotate [2]
    • objectBoundingBox (Standardwert)
    • userSpaceOnUse:
  • hatchContentUnits: setzt das Koordinatensystem für den Inhalt des hatch-Musters [3]
    • objectBoundingBox
    • userSpaceOnUse: (Standardwert)
Beispiel
    <defs>
      <hatch id="hatch98" hatchUnits="userSpaceOnUse" pitch="20">
        <hatchpath stroke-width="2" d="L 0,0 10,50"/>
      </hatch>
      <hatch id="hatch99" hatchUnits="userSpaceOnUse" pitch="20">
        <hatchpath stroke-width="2" d="M 0,0 10,50"/>
      </hatch>
    </defs>
Hatch- Beispiel
Hatch-98 (mit einem Zickzack-hatchPath)
Hatch-Beispiel
Hatch-99 (die Linien sind nicht verbunden)

[Bearbeiten] hatchpath

Das hatchpath-Element ist weitgehend identisch zum path-Element.[4] Das d-Attribut definiert den Verlauf der Linie(n). Wenn das d-Attribut ein moveTo am Anfang oder ein closePath am Ende hat, sind die Linien nicht verbunden. Ansonsten bilden sie unendliche Linien. Fehlt das d-Attribut, wird eine unendlich lange Gerade gebildet.

Achtung!

In früheren Entwürfen ist noch die Schreibweise hatchPath zu finden. Sie wurde zu hatchpath vereinfacht.

[Bearbeiten] Quellen

  1. W3C: Hatches
  2. W3C: Attributes: hatchUnits
  3. W3C: Attributes: hatchContentUnits
  4. W3C: hatchpath-Element
Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML