滚动时保持 SVG 对象静态

在我的 Web 应用程序中，我正在生成一个 SVG 文件，其中包含一个“标题”，当用户向下滚动图像时，我希望该文件在窗口顶部保持可见。

我可以想到两种方法来实现这一目标，但我正在寻找任何其他好主意。我的两个想法是：

• 生成两个单独的 SVG，一个是“标题”，一个是内容，然后简单地以两种不同的 HTML 方式显示它们<div>元素，允许下面的元素滚动。我不喜欢这个想法，因为我必须生成两个单独的文档。

• 在 SVG 本身中利用 ECMAScript 并找到一种浮动的方法<g>包含页面顶部的标题。我喜欢这个，因为每当查看 SVG 时它都应该可以工作，但我不确定如何实现这一点，并且希望有任何指示或示例。

我有第一个案例的例子here http://xn--dahlstrm-t4a.net:

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

另一种情况，当然需要客户端启用脚本，并且会有点闪烁（因为它是如何完成的：滚动事件> dom操作>重绘），可以看到完整的示例here http://xn--dahlstrm-t4a.net/svg/examples/FixedPositionGroupInScript.svg.