SVG ClipPath實作六角形影像的方法

這篇文章跟大家分享的內容是關於SVG ClipPath實現六邊形圖像的方法，話不多說，我們直接進入正文。

使用SVG，我們可以新增剪切路徑來更改影像的形狀。

首先，我們打開一個帶有namespaced 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>

最後，我們將路徑應用於我們的圖像。這是一種很好的技術，因為如果我們將圖像包裹在一個連結中，它將不具有通常的矩形形狀，而是我們的一個clipPath（在這種情況下為六邊形）。我們可以這樣做：

<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中文網其他相關文章！