Wie kann ich bei Verwendung von Inline-SVG eine reaktionsfähige Ausrichtung von Clippfaden sicherstellen?

Responsiver Clip-Pfad mit Inline-SVG

Beim Anwenden eines Clip-Pfads auf ein Element mit Hintergrund ist es üblich, das SVG inline einzubetten. Es können jedoch Probleme mit der Reaktionsfähigkeit oder Ausrichtung auftreten, wie im folgenden Beispiel dargestellt:

<code class="html"><header id="block-header">
  <svg width="100%" height="100%" viewBox="0 0 4000 1696" preserveAspectRatio="none">
    <defs>
      <clipPath id="myClip">
        <path d="M0 1568.18V0h4000v1568.18S3206.25 1696 2000 1696C984.37 1696 0 1568.18 0 1568.18z" />
      </clipPath>
    </defs>
  </svg>
</header></code>

Das Problem

In diesem Beispiel hat das Inline-SVG explizite Abmessungen (4000 Pixel breit), die kann viel größer sein als die tatsächliche Größe des Headers. Folglich wird der Clip-Pfad unverhältnismäßig groß, was zu einer unerwarteten Ausrichtung führt.

Die Lösung: clipPathUnits="objectBoundingBox"

Um einen responsiven Clip-Pfad zu erstellen, können Sie clipPathUnits= verwenden Attribut „objectBoundingBox“:

<code class="html"><svg width="0" height="0">
  <defs>
    <clipPath id="myClip" clipPathUnits="objectBoundingBox">
      <path d="M0,0 1,0 1,0.9 C 1,0.9, 0.77,1, 0.5,1 0.23,1, 0,0.9,0,0.9z" />
    </clipPath>
  </defs>
</svg></code>

Mit diesem Attribut sind die ViewBox und die Abmessungen des SVG irrelevant, und der Clippfad wird stattdessen auf den Begrenzungsrahmen des Elements skaliert, auf das er angewendet wird. Dies gewährleistet eine reaktionsschnelle und konsistente Ausrichtung des Clippfads, unabhängig von der Größe des Elements.

Das obige ist der detaillierte Inhalt vonWie kann ich bei Verwendung von Inline-SVG eine reaktionsfähige Ausrichtung von Clippfaden sicherstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!