html - 滚动时保持 SVG 对象静态

Question

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

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

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

• 在 SVG 本身中使用 ECMAScript 并找到一种方法来 float <g>包含页面顶部的标题。我喜欢这个，因为无论何时查看 SVG，它都应该可以工作，但我不确定如何实现这一点，如果有任何指示或示例，我将不胜感激。

Answer 1

我有第一个案例的例子 here :

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

另一种情况，当然需要客户端启用脚本，并且确实会闪烁一点(因为它是如何完成的:滚动事件> dom操作>重绘)，可以看到完整的例子here .