Das Muster optimieren

(Auszug aus "Das Einsteigerseminar SVG — Webgrafiken mit XML" von Helma Spona)

Sie haben zwar nun das Muster erzeugt, es eignet sich aber noch nicht sonderlich als Seitenbanner, da es durch seine Form den Eindruck erweckt, dass es irgendwie nicht richtig abschließt. Sie haben jedoch die Möglichkeit, nur einen Auszug aus dem Muster darzustellen. Das könnte dann wie folgt aussehen:

Ausgeschnittenes Muster

Abbildung: Ausgeschnittenes Muster.

Mit Hilfe des <clipPath>-Tags können Sie nämlich Ausschnitte definieren. Alles was außerhalb dieses Ausschnittes liegt, ist dann nicht sichtbar. Für das Muster benötigen Sie einen rechteckigen Ausschnitt. Um den zu definieren, müssen Sie vor der Gruppe, in der die Pfade zusammengesetzt werden, eine weitere Gruppe einfügen. In dieser Gruppe definieren Sie den Tag <clipPath>. Wichtig dabei ist, dass Sie ihn mit dem id-Attribut benennen, da Sie den Ausschnitt später der Gruppe mit dem Muster zuweisen müssen und das geht nur über den Namen des Tags. Innerhalb des Tags definieren Sie dann den Ausschnitt, wieder mit Hilfe eines Pfades.

Nun müssen Sie noch die Gruppe mit dem Muster um ein style-Attribut ergänzen. Es muss die Einstellung clip-path enthalten, die den Ausschnitt festlegt, der angewendet werden soll.

Hinweis:
Verweise auf Elemente innerhalb der SVG-Datei werden mit der url-Angabe gemacht. Dabei folgt in Klammern der Name des Elements. Hier also der Name des definierten Ausschnitts.

<?xml version="1.0" standalone="no"?>
...
<svg width="500" height="500">
  <g>
    <clipPath id="Ausschnitt">
      <path d="M50 -51 h +400 v+102 h-400 z" />
    </clipPath>
  </g>
  <g transform="translate(-40,55)" style="clip-path:url(#Ausschnitt)">
    ...
  </g>
</svg>

   

<< zurück vor >>

 

 

 

Tipp der data2type-Redaktion:
Zum Thema SVG bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an:

Copyright © verlag moderne industrie GmbH 2001
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "Das Einsteigerseminar SVG — Webgrafiken mit XML" denselben Bestimmungen wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

verlag moderne industrie GmbH, Justus-von-Liebig-Straße 1, D-86899 Landsberg/Lech, fon ++49 (0) 81 91 / 125 – 0, leserservice(at)mi-verlag.de