CODEWITHSUNDEEP
javascriptajaxsvgredraw
Paris Char
Paris Char

Reputation: 497

Force redraw of svg when using <use> for svg data

I have an svg element (#svg_wrapper) that displays using a element which loads the svg data (updated by ajax) that are stored in the dom under a display:none div parent (#svg_loader). How can i force a redraw of the the svg data the element uses after I load updated svg markup in the hidden div?

The usage of is imperative in my case because that's the only way i can scale the loaded svg to my container's size (#timeline_wrapper).

I managed to successfully add the updated svg node in the #svg_loader , but then the browser doesn't re-render the changes. How can I force it to redraw the changed svg that just loaded in the DOM (and replaced the previous one) ?

<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>

Upvotes: 1

Views: 1662

Answers (1)

nicholaswmin
nicholaswmin

Reputation: 22989

How about flushing the innerHTML of your hidden div and reattaching the new data?

As simple as:

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

As a side note:

Although changing the inner data of an SVG should force it to redraw, you could also try not to change the data of the SVG directly.

You can just substitute the whole SVG string with the new one - if you are not getting the whole SVG string data with the <svg> tags through your AJAX call, you could simply create your own string (in full SVG format) and just concatenate your AJAX data within it, then attach it through innerHTML=yourFullSvgString as explained above

Upvotes: 1

Related Questions