剪裁和遮罩
一开始，擦除创建内容的一部分可能看起来有些矛盾。但是，例如，当你尝试在 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。