Wie mache ich Inline-SVG-Clippfade responsiv?

Responsiver Clip-Pfad mit Inline-SVG

Problem:

Ein Clip-Pfad definiert Durch die Verwendung einer Inline-SVG wird nicht die gewünschte Krümmung auf das übergeordnete Element angewendet.

Analyse:

Im bereitgestellten Code wird eine ClipPath-Referenz auf ein Element mit a angewendet Hintergrund. Der Clip-Pfad ist jedoch nicht wie vorgesehen sichtbar.

Grund:

Der Clip-Pfad, auf den durch url(#myClip) verwiesen wird, ist mit absoluten Abmessungen in definiert Inline-SVG. Bei Anwendung auf das übergeordnete Element werden die Beschneidungspfadabmessungen nicht auf die Größe des Elements skaliert, was dazu führt, dass die Krümmung nicht sichtbar ist.

Lösung:

An Um einen reaktionsfähigen Clip-Pfad zu erstellen, der mit dem übergeordneten Element skaliert, sollte das Attribut „clipPathUnits“ in der ClipPath-Definition auf „objectBoundingBox“ gesetzt werden. Dadurch wird sichergestellt, dass die Abmessungen des Clippfads relativ zum Begrenzungsrahmen des übergeordneten Elements sind, sodass es reagiert.

Aktualisierter Code:

<code class="html"><header id="block-header">
    <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>
</header></code>

Durch Einstellung Wenn Sie die ClipPathUnits auf „objectBoundingBox“ umstellen, wird der Clippfad automatisch an die Größe des übergeordneten Elements angepasst, um sicherzustellen, dass die Krümmung sichtbar ist und auf Änderungen der Elementgröße reagiert.

Das obige ist der detaillierte Inhalt vonWie mache ich Inline-SVG-Clippfade responsiv?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!