SVG マスクを使用して CSS で画像のクリッピング領域を拡張するにはどうすればよいですか?

SVG 画像のクリッピング領域の拡張

CSS では、クリップパスを使用して画像の特定の領域を描写できます。ただし、クリップ パスが目的の領域と完全に一致していない場合、画像が切り詰められて表示されることがあります。

この問題に対処するには、クリップ パスではなく SVG をマスクとして使用することを検討してください。このメソッドを使用すると、SVG のサイズと位置を背景画像のように操作できます。

SVG をマスクとして適用するには:

1. 正しい viewBox を設定します:

   .clipped-img {
     ...
     -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 207 167"><path d="..."></path></svg>') 
               center/contain no-repeat;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 207 167"><path d="..."></path></svg>') 
               center/contain no-repeat;
   }

   これにより、SVG のサイズが調整され、画像のサイズと確実に揃うようになります。

2. 画像のサイズとオブジェクトのフィットを調整します:

   .clipped-img {
     width: 100%;
     height: 100%;
     object-fit: cover;
   }

   これらのプロパティにより、画像がクリッピング領域を満たし、正しく拡大縮小されます。

SVG の利点マスク:

• 動的なサイズ変更と再配置: 画面サイズまたはユーザー操作に基づいて調整できます。
• 複数の要素をマスク: 単一の SVG マスクを使用して、複数の画像を整形したり、要素。
• 画質の維持: スケーリングは、クリップパスの場合のようにピクセレーションや歪みを引き起こしません。

例:

を考慮してくださいHTML:

<div class="img-container">
  <img class="clipped-img" src="image.jpg">
</div>

マスクのサイズと形状を調整するには、マスクの SVG 内の viewBox を変更するだけです。

以上がSVG マスクを使用して CSS で画像のクリッピング領域を拡張するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。