0

我有一堆多边形位于 svg-pan-zoom 组中，它们以下列方式覆盖在图像上：

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

当我将其 w/h 分别设置为 100% 时，图像会在调整大小时扩散以填充容器。但是，当我调整页面大小时，我的多边形没有缩放到图像上的适当位置，也许我应该重新考虑如何设置图像的宽度和高度？我正在使用 svg.js 进行操作。有什么方法可以轻松纠正窗口调整大小时多边形点的位置？我也在使用 svg-pan-zoom.js，并按照演示中的规定添加了相应的侦听器：

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

0 回答 0