🥇 Imagens SVG ClipPath

Com o SVG, podemos adicionar um caminho de recorte para alterar a forma de nossas imagens.

Cenário

Primeiro, abrimos uma tag SVG com atributo href com namespace e definição de namespace:

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

Em seguida, criamos um clipPath e atribuímos a ele um ID, que será aplicado à nossa imagem como referência. O clipPath que projetamos será a parte visível de nossa imagem. Neste caso, usamos um hexágono (o elemento de grupo externo <g> resolve um bug no Safari).

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

Por fim, aplicamos o caminho à nossa imagem. É uma técnica preciosa porque se envolvermos a imagem em um link, ela não terá a forma retangular usual, mas a do nosso clipPath (neste caso hexagonal). Podemos fazer desta forma:

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

Aqui está o código final:

<svg class="svg-graphic" width="180" height="200" viewBox="0 0 560 645" >="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" version="1.1">
    <g>
       <clipPath id="hexagonal-mask">
          <polygon points="130,0 0,160 0,485 270,645 560,485 560,160" />
       </clipPath>
    </g> 
    <a xlink:href="http://www. web-expert.it">
     <image clip-path="url(#hexagonal-mask)" height="100%" width="100%" xlink:href="img.jpg" />
    </a>
</svg>

Confira um exemplo aqui: http://www.web-expert.it/summer-lab/vintage-airlines/demos/vintage-airlines.html

Related Posts