Home  >  Article  >  Web Front-end  >  SVG ClipPath method to implement hexagonal images

SVG ClipPath method to implement hexagonal images

不言
不言Original
2018-11-06 16:15:543763browse

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.

SVG ClipPath method to implement hexagonal images

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn