我假设您正在寻找与此类似的东西。
计算机图形学中两种常用的操作是裁剪和遮罩。这两种操作都隐藏了元素的可视部分。如果您以前使用过 SVG 或 HTML Canvas，那么这些操作对您来说可能并不新鲜。裁剪定义了元素的可见区域。该区域周围的所有内容都不会被渲染 - 它会被“剪辑”。在遮罩时，遮罩图像与元素合成，影响该元素的 Alpha 通道。被遮罩元素的某些部分变得完全或部分透明。新的 CSS Masking 规范旨在将这两个操作带入 HTML 世界。
CSS 2.1 中的剪辑
CSS 2.1 已经指定了 clip 属性。此属性仅限于使用 rect() 函数对顶部、右侧、底部和左侧边缘采用四个距离参数进行矩形裁剪。烦人的部分：clip 属性仅适用于绝对定位的元素。该属性只是在其他元素上被忽略。
CSS：
img {
position: absolute;
clip: rect(10px, 290px, 190px, 10px);
}
HTML：
<img src="image.jpg" width="568">
clip 属性也仅限于 SVG 中的特定元素。这就是为什么 SVG 规范添加了现在由 CSS Masking 改编的 clip-path 属性的原因之一。
剪辑路径属性
clip-path 属性可以应用于所有 HTML 元素、SVG 图形元素和 SVG 容器元素。它要么引用一个元素，要么引用 CSS Exclusions 引入的基本形状之一。
该元素从 SVG 中获取任何图形元素并将它们用作剪切区域。SVG 中的图形元素是 、 、 、 、 和 。还允许组合多个图形元素。然后将所有形状的联合用作剪切区域。以下示例演示了 的用法：
CSS：
img {
clip-path: url(#clipping);
}
HTML：
<svg>
<defs>
<clipPath id="clipping">
<circle cx="284" cy="213" r="213" />
</clipPath>
</defs>
</svg>
<img src="image.jpg" width="568">
另一方面，基本形状不需要任何 SVG 标记。它们被添加到剪辑路径中，为简单的剪辑操作提供简单的速记功能。
- rectangle(, , , , , ) 定义了一个矩形，类似于 clip 的 rect() 函数，并为圆角矩形添加了两个可选的半径参数。
- circle(, , ) 定义一个具有中心点和半径的简单圆。
- ellipse(, , , ) 定义一个椭圆，其中心点为水平半径和垂直半径。
- polygon( , , ..., ) 根据传递的点列表定义一个多边形。
CSS 标记可能类似于以下示例：
img {
clip-path: polygon(0px 208px, 146.5px 207px, 147px 141.2px, ...);
}
剪辑对于视觉内容的呈现非常有用。以下示例将不同的裁剪操作应用于图像。
希望这可以帮助。
编辑
更新的解决方案。你有两个解决方案。一个是现有的场景，下一个是你想要的相反的场景。
你必须使用masking相同的概念。
的HTML：
<svg>
<defs>
<linearGradient id="gradient" x1="0" y1="00%" x2 ="0" y2="100%">
<stop stop-color="black" offset="0"/>
<stop stop-color="white" offset="1"/>
</linearGradient>
<mask id="masking" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
<rect y="0.3" width="1" height=".7" fill="url(#)" />
<circle cx=".5" cy=".5" r=".35" fill="white" />
</mask>
</defs>
</svg>
<img id="a" src="http://1-ps.googleusercontent.com/x/s.html5rocks-hrd.appspot.com/www.html5rocks.com/en/tutorials/masking/adobe/xclip1a.png.pagespeed.ic.zv42frgxly.jpg">
<svg>
<defs>
<linearGradient id="gradient" x1="0" y1="00%" x2 ="0" y2="100%">
<stop stop-color="black" offset="0"/>
<stop stop-color="white" offset="1"/>
</linearGradient>
<mask id="masking1" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
<rect y="0.3" width="1" height=".7" fill="url(#gradient)" />
<circle cx=".5" cy=".5" r=".35" fill="black" />
</mask>
</defs>
</svg>
<img id="b" src="http://1-ps.googleusercontent.com/x/s.html5rocks-hrd.appspot.com/www.html5rocks.com/en/tutorials/masking/adobe/xclip1a.png.pagespeed.ic.zv42frgxly.jpg">
CSS：
img#a {
mask: url(#masking);
}
img#b {
mask: url(#masking1);
}
希望这可以帮助。