CODEWITHSUNDEEP
javascriptsvgsvgpanzoom
TooLateTheHero
TooLateTheHero

Reputation: 55

SVG polygon in wrong position after resize

I have a bunch of polygons sitting inside an svg-pan-zoom group, which are overlayed onto an image in the following fashion:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs" xmlns:ev="http://www.w3.org/2001/xml-events" style="overflow: hidden; ">
    <g id="viewport-20201119094245243" class="svg-pan-zoom_viewport" transform="matrix(1,0,0,1,0,0)" style="transform: matrix(1, 0, 0, 1, 0, 0);">
        <image width="100%" height="100%" xlink:href="..."></image>
        <g class="overlay-container">
            <g class="zoning">
                <polygon points="193,598.5 211,553.5 247,579.5 193,608.5" fill-opacity="0.2" fill="#ff0000" stroke-width="2" stroke="#ff0000"></polygon>
           </g>
        </g>
    </g>
</svg>

The image spreads to fill the container on resize as I've set it's w/h as 100% respectively. However, my polygons do not scale to their appropriate place on the image as I resize the page, maybe I should reconsider how I set the width and height of the image? I am using svg.js for the manipulation. Is there any way to easily rectify the position of the points of the polygon on window resize? I am using svg-pan-zoom.js also, and have added in the respective listener as prescribed in the demo:

window.addEventListener('resize', (e) => {
    panZoom.resize();
    panZoom.fit();
    panZoom.center();
});

Upvotes: 0

Views: 315

Answers (0)

Related Questions