Keep an SVG Object static while scrolling...

Question

In my web application, I am generating a SVG file which contains a "header" that I would like to keep visible at the top of the window as the user scrolls down the image.

I can think of two ways of accomplishing this, but am looking for any other bright ideas. My two thoughts are:

• Generate two separate SVGs, one being the "header" and one being the content and then simply displaying them in two different HTML <div> elements, allowing the lower one to scroll. I don't like this idea because I would have to generate two separate documents.

• Utilise EMCAScript in the SVG itself and find a way to float the <g> that contains the header at the top of the page. I like this, because whenever the SVG is viewed it should work, but I am not sure how to accomplish this and would appreciate any pointers or examples.

Answer 1

Can't you just use CSS?

#header_id {
    position: fixed;
    top : 0;
 }

Edit

Sorry, I was thrown by the term object. I thought the svg WAS the header for another document. But I checked, and the W3C docs say you can apply CSS2 positioning to anything but the outer-most element. Let me know if it's as simple as my idea. I'd love to know.

Answer 2

This may or may not be outside the scope of your requirements, just thinking out loud. You could put the page content in a viewBox with an svg scrollbar on it. ie:

<svg>
  <g id='header'>Header</g>
  <svg viewBox='0 0 800 600'>Page Content</svg>
  <g id='scrollbar'></g>
</svg>

This would mean a lot of EMCAScript work on the scroll bar. But most of that should be available at carto.net:

http://www.carto.net/papers/svg/samples/

The actual viewport for the viewBox can be kept in proportion using the aspect tag too.

I have tackled a similar problem with header and footer to stay fixed and found best performance and flexibility using an html page with three svg docs in fixed position divs. Works perfect in all browsers, resizes really smooth, and scales correctly at all window sizes.

Answer 3

I've got an example of the first case here:

footer { background: url(images/grasspat.svgz); height: 64px; width: 100%; position: fixed; left: 0; right: 0; top: auto; bottom:0; }

The other case, which will of course require the client to have script enabled, and does flicker a bit (because of how it's done: scroll event > dom operation > repaint), a full example can be seen here.

Answer 4

You can create and position multiple <svg> elements, which you can set (at least in script from my own experience) to be position:fixed and this will work. Ensure your "floating" svg area is on top in the z-order.

One caveat: Firefox is different regarding "click-through" on floating svg layers like this than the other browsers. Firefox 3.6 respects the pointer-events property better than prior versions of Firefox. The others default to allowing click-through.