SVG ClipPath method to implement hexagonal images

The content of this article is about the method of realizing hexagonal images with SVG ClipPath. Without further ado, let’s go directly to the text.

With SVG, we can add clipping paths to change the shape of the image.

First, we open an SVG tag with a namespaced href attribute and a 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">

Then we create a clipPath and give it an ID , which will be applied to our image as a reference. The clipPath we design will be the visible part of our image. In this case we implement hexagons (outside group element to resolve the bug on Safari).

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

Finally, we apply the path to our image. This is a good technique because if we wrap the image in a link, it won't have the usual rectangular shape, but instead one of our clipPaths (a hexagon in this case). We can do this:

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

This is the final 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">
    
       
          
       
     
    
     
    

The above is the detailed content of SVG ClipPath method to implement hexagonal images. For more information, please follow other related articles on the PHP Chinese website!