html - 如何使两个部分在 SVG 中看起来像一个部分？

Question

我们有一个由两部分组成的 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，但它们都没有最终解决问题。optimizeSpeedcrispyEdges

我怀疑浏览器在进行抗锯齿时没有考虑附近的对象，并且在小功能上非常明显。

是否有可能使这两个部分看起来像一个部分，它们之间没有任何伪影并且没有重叠？

标签： htmlsvgpixel-perfect