clip

Veraltet: Diese Funktion wird nicht mehr empfohlen. Obwohl einige Browser sie möglicherweise noch unterstützen, könnte sie bereits aus den relevanten Webstandards entfernt worden sein, in Kürze entfernt werden oder nur noch aus Kompatibilitätsgründen bestehen. Vermeiden Sie die Verwendung und aktualisieren Sie vorhandenen Code, falls möglich; siehe die Kompatibilitätstabelle am Ende dieser Seite, um Ihre Entscheidung zu unterstützen. Beachten Sie, dass diese Funktion jederzeit aufhören könnte zu funktionieren.

Das clip-Attribut definiert den sichtbaren Bereich eines Elements. Sie sollten stattdessen clip-path verwenden.

Hinweis: Als Präsentationsattribut hat clip auch ein entsprechendes CSS-Eigenschaftsgegenstück: clip. Wenn beide angegeben sind, hat die CSS-Eigenschaft Vorrang.

Dieses Attribut hat dieselben Parameterwerte wie für die CSS-clip-Eigenschaft definiert. Werte ohne Einheit, die aktuelle Benutzerkoordinaten angeben, sind bei den Koordinatenwerten auf dem rect() erlaubt. Der Wert auto definiert einen Clipping-Pfad entlang der Begrenzungen des vom gegebenen Element erzeugten Ansichtsfensters.

Sie können dieses Attribut mit den folgenden SVG-Elementen verwenden:

Beispiel

html
<svg viewBox="0 0 20 10" xmlns="http://www.w3.org/2000/svg">
  <!-- Auto clipping -->
  <svg x="0" width="10" height="10" clip="auto">
    <circle cx="5" cy="5" r="4" stroke="green" />
  </svg>

  <!-- Rect(top, right, bottom, left) clipping -->
  <svg x="10" width="10" height="10" clip="rect(1, 9, 8, 2)">
    <circle cx="5" cy="5" r="4" stroke="green" />
  </svg>
</svg>

Verwendungshinweise

Wert auto | rect()
Standardwert auto
Animierbar Ja

Der Wert auto definiert einen Clipping-Pfad entlang der Begrenzungen des vom gegebenen Element erzeugten Ansichtsfensters. Der Wert rect() definiert ein Clipping-Rechteck gemäß der folgenden Syntax: rect(<top>, <right>, <bottom>, <left>). Die Werte <top> und <bottom> geben Verschiebungen von der oberen Randkante des Elementansichtsfensters an, während <right> und <left> Verschiebungen von der linken Randkante des Elementansichtsfensters angeben.

Spezifikationen

Specification
CSS Masking Module Level 1
# clip-property

Browser-Kompatibilität