javascript - 如何强制 webkit 在更改原始内容后更新 SVG 使用元素

Question

在以下示例中，通过 Javascript 更新链接的原始内容后，最新的 webkit 浏览器无法正确更新 use 元素的呈现。

http://flooradvisor.com.au/shapes/backend/room/draw_floor.webkitbug.php?room=1&shape=rectangle&design=blocky&rectangle_1=23

Javascript 将原始元素更改为红色，但 webkit 不会更新克隆。这适用于其他浏览器。

我尝试了以下技巧的各种组合，但它们导致我的 SVG DOM 被重置为原始状态(颜色和 View 框重置为原始 SVG 文档值)

        /*  Hide and reshow the element (workaround for webkit not updating <use> elements) */
    /*
    svg_el.style.display='none';
    svg_el.offsetHeight; // no need to store this anywhere, the reference is enough
    svg_el.style.display='block';

    svg_doc = svg_el.contentDocument; // get the inner DOM of SVG
    svg_root_el = svg_doc.getElementsByTagName('svg')[0];
    svg_root_el.setAttribute("viewBox", "0 0 2048 2048");
    svg_root_el.setAttribute("width", "2048");
    svg_root_el.setAttribute("height", "2048");     
    */

    var parent = svg_el.parentNode;
    var new_el = svg_el.cloneNode(true);
    parent.insertBefore(new_el, svg_el);
    parent.removeChild(svg_el);

Answer 1

经过一些实验，我创建了一个有效的 hack。更新 SVG 后，我调用以下函数来强制重绘:

function repaint() {
    var svg_doc = svg_el.contentDocument; // get the inner DOM of SVG
    svg_doc.rootElement.innerHTML += ''; // "update" the inner source
}

可能值得注意的是，您不能使用根元素的outerHTML。它是只读的，因为它的父级(SVG 文档)不是“元素”。