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

Снимок экрана с вопросом:

enter image description here

Почему это случилось?

Как я могу справиться с этим?

1
Yochai Akoka 28 Окт 2019 в 12:13

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>
2
Fabrizio Calderan 28 Окт 2019 в 09:27

Попробуйте добавить 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>
2
Hao Wu 28 Окт 2019 в 09:26
58588241