我们有一个SVG，它由两部分组成，它们沿着某条路径“接触”。
问题在于，即使这两部分之间的距离为0，浏览器仍会沿路径绘制灰色像素。
.container {
width: 100px;
height: 100px;
padding: 20px;
background: black;
}
svg * { shape-rendering: geometricPrecision; }<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<defs>
<clipPath id='clip_A'>
<path d="M0 100 C45 100 50 0 100 0 V0 H0 z" />
</clipPath>
<clipPath id='clip_B'>
<path d="M0 100 C45 100 50 0 100 0 V100 H0 z" />
</clipPath>
</defs>
<!-- first part -->
<rect
x='0'
y='0'
width='100'
height='100'
fill='#ffffff'
clip-path='url(#clip_A)'
/>
<!-- second part -->
<rect
x='50'
y='0'
width='50'
height='100'
fill='#ffffff'
clip-path='url(#clip_B)'
/>
</svg>
</div>
一种方法是添加笔划，但这会导致这些部分重叠，具有许多副作用（例如，<clipPath />内部的笔划会被忽略）并在复杂的SVG中造成混乱。
我尝试将shape-rendering设置为：geometricPrecision，optimizeSpeed和crispyEdges，但是它们都不能完全解决问题。
我怀疑浏览器在进行抗锯齿时不会考虑附近的物体，并且在小功能上非常明显。
是否有可能使这两个部分看起来像一个部分，它们之间没有任何伪影并且没有重叠？