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，只能捕获由整个窗口调整大小引起的SVG调整大小。是的，并且由于打开了开发人员工具而调整了SVG的大小，这也可以正常工作，但这大概是因为这也可以调整整个窗口的大小。

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

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

Answer 1

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

min sum((i,j), abs(x(i,j)*(a(i)/b(j) - y(i,j))) )
subject to
    y(i,j) = x(i,j)*c
    sum(j, x(i,j)) = 1   for all i
    x(i,j) in {0,1}
    c free

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

在纯JavaScript中捕获SVG onresize（）？

1 个答案: