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

Question

在以下示例中，最新的 webkit 浏览器在通过 Javascript.

更新链接原件后，无法正确更新 use 元素的呈现

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

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

我尝试了以下 hack 的各种组合，但它们导致我的 SVG DOM 被重置为原始状态（颜色和视图框重置为原始 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 文档）不是 "element".

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

How to force webkit to update SVG use elements after changes to original

javascript

svg

webkit