SVG Clip-Path

ClipPath

SVG-Datei

Clipping in CSS and SVG – The clip-path Property and Element »Sara Soueidan

Schritt 1: .svg-Datei erstellen mit <defs> und <clipPath>

<svg width="0" height="0">
  <defs>
    <clipPath id="svgPath">
      <path fill="none" stroke="#000000" d="....."/>
    </clipPath>
  </defs>
</svg>

Warum sind Breite und Höhe gleich Null gesetzt? Sonst nimmt die Datei am Seitenanfang den Platz ein, den sie laut Breite und Höhe hätte.

Diese Datei wird als .html5-Datei in den Templates-Ordner gelegt.

Schritt 2: Die .svg-Datei wird mittels Insert-Tag zwischen wrapper und header in die fe_page.html5 eingebunden:

  <div id="wrapper">    
    {{file::clip.html5}}
    <?php $this->block('header'); ?>

Schritt 3: Die Schnittmaske wird per CSS dem jeweiligen Objekt zugeordnet. Wenn ein Schatten gewünscht ist, kann dieser als CSS-Drop-Shadow dem Eltern-Element zugewiesen werden.

  .ce_image {
    filter: drop-shadow(0 0.5rem 0.55rem rgba(0, 0, 0, 0.2));
    img {
      clip-path: url(#svgPath);
    }
  }