SVG：在同一（x，y）上创建2个矩形会产生不需要的边框

Question

.rect-x {
  fill: red;
}

.rect-y {
  fill: pink;
}

<svg viewBox="0 0 1024 768">
  <rect class="rect-x" x="0" y="0" width="100" height="100"></rect>
  <rect class="rect-y" x="0" y="0" width="100" height="100"></rect>
</svg>

问题截图：

为什么会这样？

我该如何处理？

Answer 1

尝试添加shape-rendering="crispEdges"以禁用抗锯齿

.rect-x {
  fill: red;
}

.rect-y {
  fill: pink;
}

<svg viewBox="0 0 1024 768">
  <rect class="rect-x" x="0" y="0" width="100" height="100"></rect>
  <rect class="rect-y" x="0" y="0" width="100" height="100"></rect>
  
  <rect class="rect-x" x="200" y="0" width="100" height="100" shape-rendering="crispEdges"></rect>
  <rect class="rect-y" x="200" y="0" width="100" height="100" shape-rendering="crispEdges"></rect>
</svg>

Answer 2

尝试关闭SVG上的抗锯齿渲染>

svg {
  shape-rendering: crispEdges;
}

.rect-x {
  fill: red;
}

.rect-y {
  fill: pink;
}

svg {
  shape-rendering: crispEdges;
}
<svg viewBox="0 0 1024 768">
  <rect class="rect-x" x="0" y="0" width="100" height="100"></rect>
  <rect class="rect-y" x="0" y="0" width="100" height="100"></rect>
</svg>