裁剪和蒙版
一開始，擦除已建立內容的一部分可能看起來有些矛盾。但是，例如，當您嘗試在 SVG 中建立半圓時，您會很快發現以下屬性的用處。
- 裁剪，指的是透過其他部分定義來移除元素的部分。在這種情況下，任何半透明效果都不可能；這是一種非此即彼的方法。
- 蒙版，另一方面，透過考慮蒙版的透明度和灰度值來允許柔和的邊緣。
建立剪輯
我們基於一個 circle 元素建立上述半圓。
<svg
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<clipPath id="cut-off-bottom">
<rect x="0" y="0" width="200" height="100" />
</clipPath>
</defs>
<circle cx="100" cy="100" r="100" clip-path="url(#cut-off-bottom)" />
</svg>
以 (100,100) 為中心，繪製一個半徑為 100 的圓。clip-path 屬性引用了一個帶有單個 rect 元素的 <clipPath>clipPath 元素通常放置在 defs 部分中。
但是，rect 不會被繪製。相反，它的畫素資料將用於確定圓的哪些畫素“進入”最終渲染。由於矩形僅覆蓋圓的上半部分，因此圓的下半部分將消失。
現在我們有了半圓，而不必處理路徑元素中的弧線。對於裁剪，會檢查 clipPath 內的每個路徑，並將其與它的筆觸屬性和變換一起評估。然後，目標中位於生成的 clipPath 內容的透明區域中的每一部分都不會被渲染。顏色、不透明度等都不會起作用，除非它們使部分完全消失。
蒙版
蒙版的效果在漸變中表現得最為突出。如果要使元素淡出，可以使用蒙版快速實現此效果。
<svg
width="200"
height="200"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient id="Gradient">
<stop offset="0" stop-color="black" />
<stop offset="1" stop-color="white" />
</linearGradient>
<mask id="Mask">
<rect x="0" y="0" width="200" height="200" fill="url(#Gradient)" />
</mask>
</defs>
<rect x="0" y="0" width="200" height="200" fill="green" />
<rect x="0" y="0" width="200" height="200" fill="red" mask="url(#Mask)" />
</svg>
您在最底層看到一個綠色填充的 rect，在其頂部是一個紅色填充的 rect。後者具有 mask 屬性，該屬性指向 mask 元素。蒙版的內容是一個單個 rect 元素，該元素填充了黑色到白色的漸變。結果，紅色矩形的畫素使用蒙版內容的亮度值作為 alpha 值（透明度），因此我們看到從綠色到紅色的漸變。
使用opacity實現透明度
opacity 屬性允許您設定整個元素的不透明度。
<rect x="0" y="0" width="100" height="100" opacity=".5" />
上面的矩形將被繪製成半透明。對於填充和筆觸，有兩個單獨的屬性 fill-opacity 和 stroke-opacity，分別控制這兩個屬性的不透明度。請注意，筆觸將繪製在填充的頂部。因此，如果在元素上設定筆觸不透明度，該元素也具有填充，則填充將在筆觸的一半上透出來，而在另一半上，背景將出現。
<svg
width="200"
height="200"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<rect x="0" y="0" width="200" height="200" fill="blue" />
<circle
cx="100"
cy="100"
r="50"
stroke="yellow"
stroke-width="40"
stroke-opacity=".5"
fill="red" />
</svg>
在本示例中，您可以在藍色背景上看到紅色圓圈。黃色筆觸設定為 50% 不透明度，這有效地導致雙色筆觸。