Wie erstelle ich reaktionsfähige Clippfade mit Inline SVG?

Responsiver SVG-Inline-Clip-Pfad

Sie stehen vor einem Problem beim Erstellen eines reaktionsfähigen Clip-Pfads mit Inline-SVG. Trotz einer reaktionsfähigen SVG-Datei wird der angewendete Clip-Pfad nicht korrekt skaliert.

Das Problem kann in der Referenzierungsmethode der Clip-Pfade in SVG liegen. Wenn Sie Clip-Pfade innerhalb einer Inline-SVG definieren, ist es nicht der richtige Ansatz, auf die SVG selbst als Clip-Pfad zu verweisen.

Die Lösung besteht darin, eine Clip-Pfad-Definition innerhalb der <defs> der SVG-Datei zu erstellen. Abschnitt und verweisen Sie mithilfe des Clip-Pfad-Attributs auf die Definition des Elements, auf das Sie den Clip-Pfad anwenden möchten.

Hier ist ein Beispiel:

<code class="html">&lt;svg width=&quot;100%&quot; height=&quot;100%&quot; viewBox=&quot;0 0 1 1&quot; preserveAspectRatio=&quot;none&quot;&gt;
  &lt;defs&gt;
    &lt;clipPath id=&quot;myClip&quot;&gt;
      &lt;path d=&quot;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&quot; /&gt;
    &lt;/clipPath&gt;
  &lt;/defs&gt;
&lt;/svg&gt;

&lt;header id=&quot;block-header&quot;&gt;
  &lt;svg width=&quot;0&quot; height=&quot;0&quot;&gt;
    &lt;defs&gt;
      &lt;clipPath id=&quot;myClip&quot; clipPathUnits=&quot;objectBoundingBox&quot;&gt;
        &lt;path d=&quot;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&quot; /&gt;
      &lt;/clipPath&gt;
    &lt;/defs&gt;
  &lt;/svg&gt;
&lt;/header&gt;</code>

In diesem Beispiel:

• Das Attribut „preserveAspectRatio“ in der ersten SVG-Datei ist auf „Keine“ gesetzt, um zu verhindern, dass die SVG-Datei bei einer Größenänderung ihr Seitenverhältnis verzerrt.
• Die SVG-Datei im Header-Element hat die Größe Null, um die Erstellung eines Seitenverhältnisses zu vermeiden Elemente auf der Seite.
• Das Attribut „clipPathUnits“ in der Clip-Pfad-Definition ist auf „objectBoundingBox“ festgelegt, was bedeutet, dass das Koordinatensystem des Clip-Pfads auf dem Element basiert, auf das es angewendet wird.

Dadurch wird sichergestellt, dass der Clippfad entsprechend dem Containerelement skaliert.

Das obige ist der detaillierte Inhalt vonWie erstelle ich reaktionsfähige Clippfade mit Inline SVG?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!