css - 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>

问题截图：

为什么会这样？

我该如何处理？

标签： csssvg

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>