Svg Polygon Flickers On Resize The Parent Div (it Should Preserve The Actual Shape)

NOTE: We need go with Viewbox concept ONLY ! I have a div(resize-div) in which I render SVG-polygon. I should be able to rearrange polygon points (by dragging and dropping them) o

Solution 1:

You code is a mess... I hardly understand what is going on there.

But one thing to mention. This code in getScaledPoints function:

return [Math.round(xScale(item[0])), Math.round(yScale(item[1]))];

Should be changed to:

return [xScale(item[0]), yScale(item[1])];

Do not make any rounding here! When you are working with "scaling", you should go into "real" numbers, not "integers". Example: click.