SVG: создание 2 прямоугольников на одном и том же (x, y) создает нежелательную границу

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>

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

enter image description here

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

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

css svg

1

Yochai Akoka 28 Окт 2019 в 12:13

Answer 1

Попробуйте отключить рендеринг сглаживания на 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

Answer 2

Попробуйте добавить 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

SVG: создание 2 прямоугольников на одном и том же (x, y) создает нежелательную границу

2 ответа

Новые вопросы

css