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