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

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.