裁剪和蒙版
一开始，擦除已创建内容的一部分可能看起来有些矛盾。但是，例如，当您尝试在 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% 不透明度，这有效地导致双色笔触。