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不会更新克隆。这适用于其他浏览器。

我尝试了以下黑客的各种组合，但这会导致我的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

经过一些实验，我创造了一个有效的黑客。更新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文档）不是“元素”。

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

1 个答案: