Wie kann ich die Größe des ClipPath-Bereichs von SVG ändern?

8

Ich habe einen solchen Code:

.img-container {
  width: 300px;
  height: 300px;
  background-color: lightgreen;  
  overflow: hidden;
}

.clipped-img {
  clip-path: url('#header-clip-svg');
}
<div class="img-container">

  <!--clipping SVG-->
  <svg height="0" width="0">
    <defs>
      <clipPath id="header-clip-svg">
        <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>
      </clipPath>
    </defs>
  </svg>

  <!-- clipped image-->
  <img class="clipped-img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3341051/team.jpg"/>
  
</div>
Erweitern Sie das Snippet

Ich möchte die Abmessungen der Clipform erhöhen, damit sie die Breite des farbigen grünen Bereichs haben. Gibt es eine Möglichkeit, dies zu erreichen?

css svg clip-path Natalia Davydova
quelle
Nicht ohne die SVG zu aktualisieren. Mir ist aufgefallen, dass es keine gibt viewbox, ich würde dort anfangen.
Paulie_D
@Paulie_D Könnten Sie bitte eine Antwort mit aktualisierter SVG hinzufügen?
Natalia Davydova
Ich bin nicht in der Lage, die SVG neu zu schreiben, das müssten Sie tun.
Paulie_D
@Paulie_D Sie meinten Bearbeitungspfad, nicht Attribute? Wenn ja, tut mir leid, ich wollte nicht nach der
Pfadbearbeitung

Antworten:

10

Sie können es als verwenden maskund seine Größe und Position wie bei a leicht anpassen background-image. Stellen Sie einfach sicher, dass Sie den richtigen Wert für das Ansichtsfeld festgelegt haben:

Code-Snippet anzeigen

CSS-Maske mit SVG-Clip-Pfad

Temani Afif
quelle
0

Hoffe das hilft dir.

.img-container {
  width: 300px;
  height: 300px;
  
  background-color: lightgreen;
  
  overflow: hidden;
}

.clipped-img {
  clip-path: url('#header-clip-svg');
      max-width: 100%;
}
<div class="img-container">

  <!--clipping SVG-->
  <svg height="0" width="0">
    <defs>
      <clipPath id="header-clip-svg">
        <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>
      </clipPath>
    </defs>
  </svg>
  <!-- clipped image-->
  <img class="clipped-img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3341051/team.jpg"/>
  
</div>
Erweitern Sie das Snippet

vadivel a
quelle