選單
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

SVG 剪裁與遮罩


SVG 剪裁與遮罩

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

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

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


SVG 剪裁

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

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

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

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

我們來看一些例子

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

Sorry, your browser does not support inline SVG.

這是 SVG 程式碼

示例

<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="100" r="100" fill="red" />
</svg>

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

Sorry, your browser does not support inline SVG.

這是 SVG 程式碼

示例

<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <clipPath id="cut-bottom">
      <rect x="0" y="0" width="200" height="50" />
    </clipPath>
  </defs>
  <circle cx="100" cy="100" r="100" fill="red" clip-path="url(#cut-bottom)" />
</svg>
自己動手試一試 »


SVG 遮罩

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

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

遮罩透過 mask 屬性引用。

這是一個簡單的遮罩示例

Sorry, your browser does not support inline SVG.

這是 SVG 程式碼

示例

<svg width="200" height="120" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <mask id="mask1">
      <rect x="0" y="0" width="100" height="50" fill="white" />
    </mask>
  </defs>
  <rect x="0" y="0" width="100" height="100" fill="red" mask="url(#mask1)" />
  <rect x="0" y="0" width="100" height="100" fill="none" stroke="black" />
</svg>
自己動手試一試 »

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

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

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

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

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

Sorry, your browser does not support inline SVG.

這是 SVG 程式碼

示例

<svg width="200" height="120" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <mask id="mask2">
      <circle cx="50" cy="50" r="30" fill="white" />
    </mask>
  </defs>
  <rect x="0" y="0" width="100" height="100" fill="red" mask="url(#mask2)" />
  <rect x="0" y="0" width="100" height="100" stroke="black" fill="none"/>
</svg>
自己動手試一試 »

填充顏色和不透明度

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

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

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

Sorry, your browser does not support inline SVG.

這是 SVG 程式碼

示例

<svg width="200" height="120" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <mask id="mask3">
      <rect x="0" y="0" width="100" height="30" fill="#232323" />
      <rect x="0" y="30" width="100" height="40" fill="#454545" />
      <rect x="0" y="70" width="100" height="30" fill="#878787" />
    </mask>
  </defs>
  <rect x="0" y="0" width="100" height="100" fill="red" mask=" url(#mask3)"/>
</svg>
自己動手試一試 »

遮罩中的漸變

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

Sorry, your browser does not support inline SVG.

這是 SVG 程式碼

示例

<svg width="200" height="120" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="gradient1">
      <stop offset="0%" stop-color="#ffffff" />
      <stop offset="100%" stop-color="#000000" />
    </linearGradient>
    <mask id="mask4">
      <rect x="0" y="0" width="100" height="100" fill="url(#gradient1)" />
    </mask>
  </defs>
  <rect x="0" y="0" width="100" height="100" fill="red" mask=" url(#mask4)"/>
</svg>
自己動手試一試 »

×

聯絡銷售

如果您想將 W3Schools 服務用於教育機構、團隊或企業,請傳送電子郵件給我們
sales@w3schools.com

報告錯誤

如果您想報告錯誤,或想提出建議,請傳送電子郵件給我們
help@w3schools.com

W3Schools 經過最佳化,旨在方便學習和培訓。示例可能經過簡化,以提高閱讀和學習體驗。教程、參考資料和示例會不斷審查,以避免錯誤,但我們無法保證所有內容的完全正確性。使用 W3Schools 即表示您已閱讀並接受我們的使用條款Cookie 和隱私政策

版權所有 1999-2024 Refsnes Data。保留所有權利。W3Schools 由 W3.CSS 提供支援