3

I wonder what could be the better way to simulate double buffering for some possibly complex SVG. I'm reloading often a modified SVG, and I'd like to get rid of the load delay. I was thinking of using two overlapped DIVs and toggle visibility after onLoad. There is some better alternative?

edit

Now I have implemented two SVG instances in DIVs overlapped, with style display toggling (block/none). It almost worked in FF (nice, smooth morphing, just initial display resulted in reduced area), but Chrome refuses to get me the ScreenCTM transform I need for syncing shapes position. I guess those problems (partial area render in FF, no render in Chrome) are related. Now I'm experimenting with visibility:hidden instead.

edit

toggling visibility give acceptable results. Thanks everybody for the help so far.

edit

I've found a problem, that make me here again for an helping hand: I'm using Boostrap for non SVG related UI, and the toolbar behaves really strange: when I switched visibility on the 2^ DIV (initially hidden), no event arrives to the toolbar. Switching again to the 1^, events are ok.

I found that using position:absolute or position:fixed is the same (for the events problem, of course), and top:0 it's the 'culprit'. Using any value > 0 let the event flow, but the DIV goes invisible. So the intial question make sense: any better method than switch visibility? or a hint on html structure? Currently my HTML looks like

<div class="row-fluid" style="height:800px;background-color:cyan">
<div id="flowchart" style="visibility:visible;width:100%;height:100%"></div>
<div id="flowchart_x" style="visibility:hidden;width:100%;height:100%;position:absolute;top:0"></div>
</div>
CapelliC
  • 59,646
  • 5
  • 47
  • 90
  • Double-buffering like this won't remove any load delay. Can you more clearly describe what you are currently experiencing? What does "reloading" mean in this case? How is it "modified"? How many SVGs are involved here? – Phrogz Jul 02 '12 at 15:09
  • Say the SVG that is reloaded overlap (partially) what's displayed. So there are 2 images, with a rudimentary *morph* between them. – CapelliC Jul 02 '12 at 15:19
  • 1
    That provides me with no additional insight into your problem. Consider editing your question to describe what you are trying to accomplish (now how you are hoping to accomplish it) and what your code currently does, and what problems you are experiencing. – Phrogz Jul 02 '12 at 15:20
  • How complex are we talking about? How big in kilobytes? Are you gzipping? My scary large svgs have all had gzip reductions of around 85%. Huge savings. – Ben Jul 03 '12 at 00:53
  • It sort of sounds like you should be loading data with XMLHttpRequest and then using that for updating the existing DOM tree. You could use a library such as http://d3js.org to help with the databinding and transitioning. – Erik Dahlström Jul 03 '12 at 08:13
  • @Erik Dahlström: I'm using the load() method of jQuery SVG, that (I think) uses XMLHttpRequest. – CapelliC Jul 03 '12 at 09:04

0 Answers0