CODEWITHSUNDEEP
csssvg
Ponpon32
Ponpon32

Reputation: 2210

SVG: creating 2 rectangles on the same (x, y) creates unwanted border

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

Screenshot of the issue:

enter image description here

why this is happen?

how can i handle it?

Upvotes: 1

Views: 118

Answers (2)

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123428

Try to turn off the antialias rendering on the 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>

Upvotes: 2

Hao Wu
Hao Wu

Reputation: 20953

Try adding shape-rendering="crispEdges" to disable antialiasing

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

Upvotes: 2

Related Questions