Wie schneide ich mithilfe einer Maske in SVG einen kreisförmigen Teil aus einem Bild aus?

Ausschneiden eines kreisförmigen Teils aus einem Bild

Beim Versuch, ein Bild mithilfe eines SVG-Pfads auszuschneiden, kann es manchmal so aussehen, als würde das Bild nicht richtig passen. Um den gewünschten kreisförmigen Ausschnitt zu erzielen, befolgen Sie diese Schritte:

Der folgende CSS-Code definiert einen Clip-Pfad unter Verwendung des bereitgestellten SVG-Pfads. Das Bild passt jedoch möglicherweise immer noch nicht richtig.

<code class="css">.topbar-chat-img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  clip-path: url(#topbar-img-svg);
}</code>

Um dieses Problem zu beheben, kann ein alternativer SVG-Ansatz gewählt werden.

<code class="svg"><svg width="200" height="200">
  <defs>
    <mask id="hole">
      <circle r="100" cx="100" cy="100" fill="white"/>
      <circle r="50" cx="180" cy="180" fill="black"/>
    </mask>
    <pattern id="img" patternUnits="userSpaceOnUse" width="200" height="200">
      <image xlink:href="image.jpg" x="0" y="0" width="200" height="200" />
    </pattern>
  </defs>

  <rect fill="url(#img)" width="100%" height="100%" mask="url(#hole)" />
</svg></code>

Diese Methode definiert eine Maske innerhalb der SVG, Gewährleistung eines sauberen kreisförmigen Ausschnitts. Die Verwendung von fill="url(#img)" innerhalb des Tag füllt das Rechteck mit dem gewünschten Bild und wendet die Maske an, um den beabsichtigten Effekt zu erzielen.

Das obige ist der detaillierte Inhalt vonWie schneide ich mithilfe einer Maske in SVG einen kreisförmigen Teil aus einem Bild aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!