剪裁和遮罩
一開始，擦除建立內容的一部分可能看起來有些矛盾。但是，例如，當你嘗試在 SVG 中建立一個半圓時，你會很快發現以下屬性的用處。
-
裁剪 (Clipping)，指的是透過其他部分定義的形狀來移除元素的某些部分。在這種情況下，無法實現半透明效果；這是一種全有或全無的方法。
-
蒙版 (Masking)，另一方面，透過考慮蒙版的透明度和灰色值，允許實現柔和的邊緣。
建立裁剪
我們基於一個 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 本身不會被繪製。相反，它的畫素資料將用於確定圓的哪些畫素“能夠”最終渲染。由於矩形只覆蓋了圓的上半部分，圓的下半部分將會消失。
這樣，我們就得到了一個半圓，而無需處理 path 元素中的弧線。對於裁剪，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%，這有效地導致了雙色描邊。
使用眾所周知的 CSS 技術
Web 開發人員工具箱中最強大的工具之一是 display: none。因此，將此 CSS 屬性引入 SVG，以及 CSS 2 定義的 visibility 和 clip 屬性，也就不足為奇了。要恢復先前設定的 display: none，重要的是要知道所有 SVG 元素的初始值都是 inline。