SVG ClipPath-Methode zum Implementieren sechseckiger Bilder

Der Inhalt dieses Artikels befasst sich mit der Methode zur Realisierung sechseckiger Bilder mit SVG ClipPath. Kommen wir ohne weitere Umschweife direkt zum Haupttext.

Mit SVG können wir Beschneidungspfade hinzufügen, um die Form des Bildes zu ändern.

Zuerst öffnen wir ein SVG-Tag mit einem Namespace-href-Attribut und einer Namespace-Definition:

<svg class="svg-graphic" width="180" height="200" viewBox="0 0 560 645" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" version="1.1">

Dann erstellen wir einen ClipPath und geben ihm eine ID, die wird als Referenz auf unser Bild angewendet. Der von uns entworfene ClipPath wird der sichtbare Teil unseres Bildes sein. In diesem Fall implementieren wir Sechsecke (außerhalb des Gruppenelements , um den Fehler in Safari zu beheben).

<g>
   <clipPath id="hexagonal-mask">
      <polygon points="130,0 0,160 0,485 270,645 560,485 560,160" />
   </clipPath>
</g>

Zuletzt wenden wir einen Pfad auf unser Bild an. Dies ist eine gute Technik, denn wenn wir das Bild in einen Link einbinden, hat es nicht die übliche rechteckige Form, sondern einen unserer ClipPaths (in diesem Fall ein Sechseck). Wir können Folgendes tun:

<a xlink:href="http://www. web-expert.it">
    <image clip-path="url(#hexagonal-mask)" height="100%" width="100%" xlink:href="img.jpg" />
</a>

Das ist der endgültige Code:

<svg class="svg-graphic" width="180" height="200" viewBox="0 0 560 645" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" version="1.1">
    
       
          
       
     
    
     
    

Das obige ist der detaillierte Inhalt vonSVG ClipPath-Methode zum Implementieren sechseckiger Bilder. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!