滚动时保持SVG对象静态

Question

在我的Web应用程序中,我正在生成一个SVG文件,其中包含一个"标题",当用户向下滚动图像时,我希望它保持在窗口顶部.

我可以想到两种方法来实现这一点,但我正在寻找任何其他明智的想法.我的两个想法是:

• 生成两个单独的SVG,一个是"标题",一个是内容,然后只是将它们显示在两个不同的HTML <div>元素中,允许较低的SVG滚动.我不喜欢这个想法,因为我必须生成两个单独的文档.

• 在SVG本身中使用ECMAScript并找到一种方法来浮动<g>页面顶部包含标题的方法.我喜欢这个,因为每当SVG被查看它应该工作,但我不知道如何实现这一点,并会欣赏任何指针或示例.

Answer 1

我已经得到了第一种情况的例子在这里:

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

另一种情况,当然要求客户端启用脚本,并且稍微闪烁(因为它是如何完成的:滚动事件> dom操作>重绘),这里可以看到一个完整的例子.