SVG Knockout Text

Die Idee ist, sich drei übereinander gestapelte Ebenen vorzustellen, bei denen die oberste Ebene verwendet wird, um eine Form aus der zweiten Ebene auszuschneiden, um die dritte Ebene freizulegen.

Wenn der Text auf der obersten Ebene des obigen Diagramms die Form wäre, die wir aus der zweiten Ebene ausschneiden, dann veranschaulicht das folgende Bild das Konzept des Knockout-Texts.

SVG-Snippet

Hier ist ein Snippet, das die unterste Ebene (.knockout), die der Knockout-Text freilegen wird, die mittlere Ebene (.knockout-text-bg), aus der ausgeschnitten wird, und die oberste Ebene (.knockout-text) einrichtet, die den SVG-Text enthält, der als Maske zum Ausschneiden der zweiten Ebene dient.

<div class="knockout">
  
  <svg class="knockout-text-container" width="100%" height="100%">
    
    <rect class="knockout-text-bg" width="100%" height="100%" fill="#000" x="0" y="0" fill-opacity="1" mask="url(#knockout-text)" />
    
    <mask id="knockout-text">
      <rect width="100%" height="100%" fill="#fff" x="0" y="0" />
      <text x="50%" y="50%" fill="#000" text-anchor="middle">Knock Out Text</text>
    </mask>
    
  </svg>
  
</div>

Die Koordinaten für den <text> sind in diesem Beispiel völlig willkürlich und können an die tatsächliche Größe und Platzierung des hinzuzufügenden Textes angepasst werden.

Beachten Sie, dass die fill der zweiten Ebene schwarz ist und die fill der obersten Ebene weiß ist. So funktionieren Masken: Weiß ist der perfekte Kontrast zu Schwarz und verbirgt die schwarzen Teile. Wir könnten der obersten Ebene eine völlig andere Farbe geben, und sie würde das Schwarz nicht vollständig verdecken, sondern etwas davon durchlassen.

CSS-Styling

Der Rest ist CSS-Styling. Wir können zum Beispiel dem untersten Layer einen Hintergrundverlauf hinzufügen und die Schriftgröße anpassen, um einen dramatischeren Effekt zu erzielen.

.knockout {
  /* Ensure the bottom layer is full screen */
  height: 100vh;
  width: 100%;
  /* Add a colorful texture and cutom font-styling */
  background-image: linear-gradient(to left, #ff4e50 , #f9d423);
  text-transform: uppercase;
}

/* Knockout text font sizing for each line */

text:nth-child(2) {
  font-size: 5em;
}

text:nth-child(3) {
  font-size: 5.1em;
}

text:nth-child(4) {
  font-size: 15em;
}

Siehe den Pen SVG Knock Out Text von Geoff Graham (@geoffgraham) auf CodePen.