Wie kann ich die SVG-ClipPath-Abmessungen dynamisch an die Containerbreite anpassen?

So passen Sie SVG-ClipPath-Abmessungen an

Dieser Artikel bietet eine Lösung zum dynamischen Anpassen der Größe eines durch ein SVG definierten ClipPath-Bereichs. Indem Sie das SVG als Maske verwenden, können Sie dessen Abmessungen und Position leicht manipulieren.

Das Problem verstehen

Im bereitgestellten Codeausschnitt ein rechteckiger Container mit einem grünen Der Hintergrund enthält ein ausgeschnittenes SVG-Bild. Ziel ist es, die Abmessungen der Schnittform zu vergrößern, um sie an die Breite des farbigen grünen Bereichs anzupassen.

Lösung: SVG als Maske verwenden

Um das Gewünschte zu erreichen Mit diesem Effekt kann die SVG-Datei als Maske auf das zugeschnittene Bild angewendet werden. Durch die korrekte Einstellung des viewBox-Attributs der SVG-Datei können Sie deren Größe und Position steuern. Hier ist eine aktualisierte Version des Codes:

CSS:

.img-container {
  width: 300px;
  height: 300px;
  background-color: lightgreen; 
  margin:5px;
}

.clipped-img {
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 207 167"><path d="M199.6,18.9c-4.3-8.9-12.5-16.4-22.3-17.8c-11.9-1.7-23.1,5.4-32.2,13.2c-9.1,7.8-17.8,16.8-29.3,20.3c-20.5,6.2-41.7-7.4-63.1-7.5C38.7,27,24.8,33,15.2,43.3c-35.5,38.2-0.1,99.4,40.6,116.2c32.8,13.6,72.1,5.9,100.9-15c27.4-19.9,44.3-54.9,47.4-88.6c0.2-2.7,0.4-5.3,0.5-7.9C204.8,38,203.9,27.8,199.6,18.9z"></path></svg>' ) 
               center/contain no-repeat;
          mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 207 167"><path d="M199.6,18.9c-4.3-8.9-12.5-16.4-22.3-17.8c-11.9-1.7-23.1,5.4-32.2,13.2c-9.1,7.8-17.8,16.8-29.3,20.3c-20.5,6.2-41.7-7.4-63.1-7.5C38.7,27,24.8,33,15.2,43.3c-35.5,38.2-0.1,99.4,40.6,116.2c32.8,13.6,72.1,5.9,100.9-15c27.4-19.9,44.3-54.9,47.4-88.6c0.2-2.7,0.4-5.3,0.5-7.9C204.8,38,203.9,27.8,199.6,18.9z"></path></svg>' ) 
               center/contain no-repeat;
}

HTML:

<div>

Erklärung:

• Das CSS für .clipped-img verwendet nun die Maskeneigenschaft, um die SVG-Datei als Maske anzuwenden.
• Das viewBox-Attribut der SVG-Datei wurde auf „0 0 207 167“ gesetzt, um den Abmessungen der Clipping-Form zu entsprechen.
• Durch die Angabe der Breite des IMG-Containers in verschiedenen Divs können Sie die Größe der SVG-Maske und des Ausschnitts einfach anpassen Bereich.

Das obige ist der detaillierte Inhalt vonWie kann ich die SVG-ClipPath-Abmessungen dynamisch an die Containerbreite anpassen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!