更改原始版本后如何強制Webkit更新SVG使用元素

Question

在以下示例中，通過Java鏈接的原始文檔更新后，最新的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重置為原始狀態（顏色和視圖框重置為原始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
}

可能值得注意的是，您不能使用root元素的outerHTML 。 它是只讀的，因為其父級（SVG文檔）不是“元素”。