Home/ Questions/Q 609219
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T17:32:33+00:00

In my web application, I am generating a SVG file which contains a header

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0