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

У меня есть элемент svg (#svg_wrapper), который отображается с использованием элемента, который загружает данные svg (обновленные с помощью ajax), которые хранятся в dom под родительским элементом display:none div (#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>

javascript svg ajax redraw
person Paris Char    schedule 03.01.2015    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Как насчет удаления 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, как описано выше

person nicholaswmin    schedule 03.01.2015
comment
Я сделал это с помощью $(hiddenDiv).html('целые данные ‹svg›'); и повторного рендеринга не происходит. Это из-за использования в отображаемом div? - person Paris Char; 05.01.2015