六角形の画像を実装する 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>

最後に、パスを画像に適用します。画像をリンクでラップすると、画像の形状が通常の長方形ではなく、クリップパスの 1 つ (この場合は六角形) になるため、これは良いテクニックです。これを行うことができます:

<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 中国語 Web サイトの他の関連記事を参照してください。