Принудительное перерисовывание svg при использовании <use> для данных svg

Question

У меня есть элемент svg (#svg_wrapper), который отображается с помощью элемента, который загружает данные svg (обновленные ajax), которые хранятся в dom под дисплеем: none div parent (#svg_loader). Как я могу заставить перерисовать данные svg, которые использует элемент после загрузки обновленной svg-разметки в скрытом div?

Использование в нашем случае является обязательным, потому что это единственный способ, которым я могу масштабировать загруженный svg до размера моего контейнера (#timeline_wrapper).

Мне удалось успешно добавить обновленный узел svg в #svg_loader, но затем браузер не переопределяет изменения. Как я могу заставить его перерисовать измененный svg, который только что загружен в DOM (и заменил предыдущий)?

<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

Как насчет смыва в innerHTML вашего скрытого DIV и реплантации новые данные?

Как просто:

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

В качестве примечания:

Хотя изменения внутренних данных из SVG должны заставить его перекроить, вы также можете попробовать не менять данные SVG напрямую.

Вы можете просто заменить всю строку SVG на новую: если вы не получаете все строковые данные SVG с помощью тегов <svg> через ваш вызов AJAX, вы можете просто создать свою собственную строку (в полном формате SVG) и только конкатенации ваши данные AJAX внутри него, а затем прикрепить его через innerHTML=yourFullSvgString, как описано выше