在普通 JavaScript 中捕获 SVG onresize()

我正在用纯JavaScript编写一个应用程序，并希望定义一个每当调整SVG大小时都会调用的draw()方法。不幸的是，简单地分配svg.onresize = draw不起作用，等效的svg.AddEventListener('resize', draw)也不起作用。

<html><body style="margin:0">
<svg id="svg" width="100%" height="100%"></svg>
<script>
let svg = document.getElementById("svg");
function line(x1, y1, x2, y2)
{
    let e = document.createElementNS(svg.namespaceURI, 'line');
    e.setAttribute('x1', x1);
    e.setAttribute('y1', y1);
    e.setAttribute('x2', x2);
    e.setAttribute('y2', y2);
    e.setAttribute('style', 'stroke:#000');
    svg.appendChild(e);
}
function frame_rect(r)
{
    let e = document.createElementNS(svg.namespaceURI, 'rect');
    e.setAttribute('x', r.x);
    e.setAttribute('y', r.y);
    e.setAttribute('width', r.width);
    e.setAttribute('height', r.height);
    e.setAttribute('style', 'stroke:#000;fill:none');
    svg.appendChild(e);
}
function draw()
{
    svg.innerHTML = ''; // remove all elements from the SVG
    let r = svg.getBoundingClientRect();
    line(r.x,r.y,r.x+r.width,r.y+r.height);
    line(r.x,r.y+r.height,r.x+r.width,r.y);
    frame_rect(r);
}
draw();

// onresize = draw;
// Works if entire page is resized, or developer tools opened.
// But misses other resize causes like splitter dragged, tab expanded, etc.
// svg.onresize = draw;
svg.addEventListener('resize', draw);
// Either of the above *should* work, per:
//
//   https://developer.mozilla.org/en-US/docs/Web/API/SVGElement
//
// But neither does, even if the entire window is resized.
svg.onclick = draw;
// Just to show that draw() can be called in response to an event.
</script></body></html>

如评论中所述，我可以使用 window.onresize ，但这是一个黑客，只会捕获由整个窗口调整大小引起的 SVG 调整大小。好的，如果由于打开开发人员工具而调整 SVG 的大小，它也恰好有效，但这大概是因为这也会调整整个窗口的大小。

此外，svg.onclick = draw会导致 SVG 因鼠标单击而重新绘制，因此我似乎将draw()处理程序附加到正确的对象。为什么onclick在捕捉事件的能力方面与onresize有什么不同？

捕获从任何来源传播的 SVG 大小的正确方法是什么，而不仅仅是窗口大小调整？

浏览器似乎不支持 SVGResize 事件。但是，在窗口调整大小事件处理程序中检查 SVG 大小是否已更改非常简单。

let svg = document.getElementById("svg");
let lastSize = null;
function line(x1, y1, x2, y2)
{
    let e = document.createElementNS(svg.namespaceURI, 'line');
    e.setAttribute('x1', x1);
    e.setAttribute('y1', y1);
    e.setAttribute('x2', x2);
    e.setAttribute('y2', y2);
    e.setAttribute('style', 'stroke:#000');
    svg.appendChild(e);
}
function frame_rect(r)
{
    let e = document.createElementNS(svg.namespaceURI, 'rect');
    e.setAttribute('x', r.x);
    e.setAttribute('y', r.y);
    e.setAttribute('width', r.width);
    e.setAttribute('height', r.height);
    e.setAttribute('style', 'stroke:#000;fill:none');
    svg.appendChild(e);
}
function resize(evt)
{
    let r = svg.getBoundingClientRect();
    if (lastSize && (lastSize.width !== r.width || lastSize.height !== r.height))     {
      draw();
    }
}
function draw()
{
    svg.innerHTML = ''; // remove all elements from the SVG
    let r = svg.getBoundingClientRect();
    line(r.x,r.y,r.x+r.width,r.y+r.height);
    line(r.x,r.y+r.height,r.x+r.width,r.y);
    frame_rect(r);
    lastSize = r;
}
draw();
window.addEventListener('resize', resize);

body {
  margin: 0;
}

<svg id="svg" width="100%" height="100%"></svg>

您可以使用

ResizeObserver对象。在此示例中，我还包含了一些代码，用于显示调整大小时宽度和高度的增量变化。

let svgWidth, svgHeight, resizeInit = false;
let svg = document.getElementById("svg");
function line(x1, y1, x2, y2) {
    let e = document.createElementNS(svg.namespaceURI, 'line');
    e.setAttribute('x1', x1);
    e.setAttribute('y1', y1);
    e.setAttribute('x2', x2);
    e.setAttribute('y2', y2);
    e.setAttribute('style', 'stroke:#000');
    svg.appendChild(e);
}
function frame_rect(r) {
    let e = document.createElementNS(svg.namespaceURI, 'rect');
    e.setAttribute('x', r.x);
    e.setAttribute('y', r.y);
    e.setAttribute('width', r.width);
    e.setAttribute('height', r.height);
    e.setAttribute('style', 'stroke:#000;fill:none');
    svg.appendChild(e);
}
function draw() {
    svg.innerHTML = ''; // remove all elements from the SVG
    let r = svg.getBoundingClientRect();
    line(r.x, r.y, r.x + r.width, r.y + r.height);
    line(r.x, r.y + r.height, r.x + r.width, r.y);
    frame_rect(r);
}
function resize(observer) {
    if (resizeInit) console.log(`Change in width: ${observer[0].contentRect.width - svgWidth}, height: ${observer[0].contentRect.height - svgHeight}`);
    else resizeInit = true;
    svgWidth = observer[0].contentRect.width;
    svgHeight = observer[0].contentRect.height;
    draw();
}
new ResizeObserver(resize).observe(svg);

body {
    margin: 0;
}

<svg xmlns="http://www.w3.org/2000/svg" id="svg" width="100%" height="100%"></svg>

相关内容

最新更新

热门标签：