육각형 이미지를 구현하는 SVG ClipPath 방법

이 글의 내용은 SVG ClipPath를 이용하여 육각형 이미지를 구현하는 방법에 대한 내용입니다.

SVG를 사용하면 클리핑 경로를 추가하여 이미지 모양을 변경할 수 있습니다.

먼저 네임스페이스가 있는 href 속성과 네임스페이스 정의가 있는 SVG 태그를 엽니다.

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

그런 다음 ClipPath를 만들고 이미지에 참조로 적용될 ID를 제공합니다. 우리가 디자인한 ClipPath는 이미지의 보이는 부분이 됩니다. 이 경우 육각형을 구현합니다(Safari의 버그를 해결하기 위해 그룹 요소 외부).

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

위 내용은 육각형 이미지를 구현하는 SVG ClipPath 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!