-2

I have an svg node with polygon objects which have 2px stroke and sometimes depends on the polygon coordinates some parts of the stroke become more thicker than other, after some research i think it is due to antialiasing and the fixes that are recommended is to use shape-rendering="crispEdges" and vector-effect='non-scaling-stroke' css proprieties, but it didn't work out for me, stroke still is inconsistent as it was stroke example, what should i do to make a consistent 2px stroke at any coordinates in my svg node?

im using ReactJS + d3.js library here is parts of the code for svg component:

<svg
  ref={svgRef}
  width={"100%"}
  height={"100%"}
  className={"svg-canvas"}
  viewBox={[0, 0, 1280, 768]}
  preserveAspectRatio={"none"}
 >
  <g className='zones'>
    {selectedTerritoryData
      .sectors
      .filter((zone) => {
        if (isEditing || isEditingCards) {
          return true;
        } else if (zone.isRegistered) {
          return true;
        }
        return false;
      })
      .map((zone) => (
       <Zone key={getReactKey("zone")} zone={zone} />
      ))
    }
  </g>
</svg>
Андрей Мельник
  • 115
  • 9
  • 2
    It may be that part of the stroke fals outside the svg canvas. Please edit your question and add the code for the svg node with the problem. – enxaneta May 27 '21 at 08:51
  • @enxaneta added – Андрей Мельник May 27 '21 at 09:01
  • A common, yet notorious problem. Rendering of lines mainly depends on stroke and fill properties, position and rendering mode (see [*"Why are some of the grid lines randomly disappearing on my responsive D3 chart?"*](/q/38896268)). The solution depends largely on your individual approach and on what you are trying to visualize. From the sparse information you are giving away it might be worth digging into semantic zooming instead of geometric zooming. This is what you are usually applying to texts anyway. – altocumulus May 27 '21 at 10:28
  • 2
    @АндрейМельник The code you posted is not very helpful. We need to see a minimal example SVG that shows the problem. – Paul LeBeau May 28 '21 at 03:00

1 Answers1

-1

Since your affected lines seem to be in the middle of your SVG map, the cause is probably not the one @enxaneta suggested.

Instead, it could be the affects of antialiasing you are seeing. See this answer for an explanation.

But it's hard to be completely sure unless you post a working SVG example for us to examine. A picture alone does not provide enough information.

Paul LeBeau
  • 91,047
  • 8
  • 141
  • 167