SVG 剪裁與遮罩

SVG 剪裁與遮罩

SVG 元素可以被剪裁和遮罩。

<clipPath> 元素用於剪裁 SVG 元素。

<mask> 元素用於對 SVG 元素應用遮罩。

SVG 剪裁

剪裁是從元素中移除一部分。

對於剪裁，我們使用 <clipPath> 元素。

<clipPath> 元素內的每個路徑/元素都會被檢查和評估。然後，目標中位於此區域之外的任何部分都將不會被渲染。換句話說：路徑之外的任何內容都被隱藏，路徑之內的任何內容都被顯示！

<clipPath> 元素通常放置在 <defs> 部分中。

我們來看一些例子

在此示例中，我們建立一個以 (50,50) 為中心，半徑為 50 的紅色圓圈

這是 SVG 程式碼

現在我們新增一個帶有單個 <rect> 元素的 <clipPath> 元素。這個 <rect> 元素將覆蓋圓的上半部分。<rect> 將不會被繪製；相反，它的大小和位置將用於確定圓的哪些畫素將顯示。由於矩形只覆蓋圓的上半部分，圓的下半部分將消失。

這是 SVG 程式碼

SVG 遮罩

對於遮罩，我們使用 <mask> 元素。

<mask> 元素用於對 SVG 元素應用遮罩。

遮罩透過 mask 屬性引用。

這是一個簡單的遮罩示例

這是 SVG 程式碼

上面的示例定義了一個 ID 為 "mask1" 的遮罩。<mask> 元素內部有一個 <rect> 元素。這個 <rect> 元素定義了遮罩的形狀。

該示例還定義了一個使用遮罩的 <rect> 元素。遮罩透過 mask 屬性引用。

紅色矩形應該有 100 畫素高，但垂直方向上只有前 50 畫素可見。這是因為遮罩矩形只有 50 畫素高。矩形只在被遮罩矩形覆蓋的部分可見。

最後一個 <rect> 元素只是為了顯示沒有遮罩的矩形大小。

這是另一個使用 <circle> 元素定義遮罩形狀的示例

這是 SVG 程式碼

填充顏色和不透明度

<mask> 元素內部元素的填充顏色定義了引用遮罩的元素的填充顏色的不透明度。

在上面的示例中，我們只使用了 fill="white"。在遮罩中，白色被視為將顯示區域，而黑色被視為將遮罩區域。

顏色越接近 #ffffff (白色)，遮罩就越不透明；顏色越接近 #000000 (黑色)，遮罩就越透明。

這是 SVG 程式碼

遮罩中的漸變

在此示例中，遮罩形狀使用漸變作為填充顏色

這是 SVG 程式碼