Méthode SVG ClipPath pour implémenter des images hexagonales

Le contenu de cet article concerne la méthode de réalisation d’images hexagonales avec SVG ClipPath. Sans plus tarder, passons directement au texte principal.

Avec SVG, nous pouvons ajouter des chemins de détourage pour changer la forme de l'image.

Nous ouvrons d'abord une balise SVG avec un attribut href avec espace de noms et une définition d'espace de noms :

<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">

Ensuite, nous créons un clipPath et lui donnons un identifiant qui être appliqué à notre image comme référence. Le clipPath que nous concevons sera la partie visible de notre image. Dans ce cas, nous implémentons des hexagones (élément de groupe extérieur pour résoudre le bug sur Safari).

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

Enfin, nous appliquons un chemin à notre image. C'est une bonne technique car si nous enveloppons l'image dans un lien, elle n'aura pas la forme rectangulaire habituelle, mais plutôt l'un de nos clipPaths (un hexagone dans ce cas). Nous pouvons faire ceci :

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

Voici le code final :

<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">
    
       
          
       
     
    
     
    

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!