使用<use>強制svg重繪svg數據

Question

我有一個svg元素（#svg_wrapper），它顯示使用加載存儲在dom下的dom中的svg數據（由ajax更新）的元素：none div parent （#svg_loader）。我如何強制重新加載元素在隱藏div中加載更新的svg標記後使用的svg數據？

在我的情況下使用是必要的，因爲這是我可以將加載的svg縮放到我的容器大小（#timeline_wrapper）的唯一方法。

我成功地在#svg_loader中添加了更新後的svg節點，但是瀏覽器並沒有重新渲染這些更改。我如何強制它重繪剛剛加載到DOM中的已更改的svg（並替換了之前的那個）？

<div id='svg_loader' style='display:none;'> 
<svg id='svg_timeline'> ajax-updated svg data</svg> 
</div> 
<div id='timeline_wrapper' style='width:725px;margin-left:auto;margin-right:auto;text-align:center;'> 
<svg id='svg_wrapper' style='width:725px;height:352px;' xmlns='http://www.w3.org/2000/svg' xmlns:x='http://www.w3.org/1999/xlink' > 
<defs id='defs3006'> 
<marker orient='auto' refY='0.0' refX='-3' id='Arrow2Mend' style='overflow:visible;'> 
    <path id='path3900' style='fill-rule:evenodd;stroke-width:0.62500000;stroke-linejoin:round;' d='M -15 -5 L 0 0 L -15 5 z' transform='scale(0.5)'/> 
</marker> 
</defs> 
<use xlink:href='#svg_timeline' x='0' y='-35' width='100%' height='100%' /> 
</svg> 
</div> 

謝謝！

Answer 1

如何沖洗你的隱藏div的innerHTML和重新連接新的數據？

簡單：

var hiddenDiv = document.getElementById('yourHiddenDiv'); 
hiddenDiv.innerHTML = ''; 
hiddenDiv.innerHTML = svgData; //where svgData is your new svg string 

作爲一個方面說明：

雖然改變SVG 應該力重新繪製內的數據，你也可以嘗試不改變直接的SVG數據。如果你沒有通過你的AJAX調用獲得帶有<svg>標籤的整個SVG字符串數據，你可以簡單地創建你自己的字符串（完整的SVG格式）和在它剛剛串連您的AJAX的數據，然後通過innerHTML=yourFullSvgString附加在它上面