以纯 JavaScript 捕获 SVG onresize()？

Question

我正在用纯 JavaScript 编写一个应用程序，并想定义一个 draw() 方法，只要调整 SVG 的大小时就会调用该方法。不幸的是，简单地分配 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，但这是一个 hack，它只会捕获由整个 window 调整大小引起的 SVG 大小调整。好的，如果由于打开开发人员工具而调整 SVG 的大小，它也恰好可以工作，但这可能是因为这也会调整整个 window.

的大小

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

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

Answer 1

浏览器似乎不支持 SVGResize 事件。但是在 window 调整大小事件处理程序中检查 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>

以纯 JavaScript 捕获 SVG onresize()？

Capture SVG onresize() in plain JavaScript?

javascript

svg

resize

event-handling