滚动时使SVG对象保持静态

Question

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

我可以想到两种方法来实现此目的，但是我正在寻找其他任何出色的想法。 我的两个想法是：

生成两个单独的SVG，一个为“标题”，一个为内容，然后仅将它们显示在两个不同的HTML <div>元素中，从而使下一个SVG滚动。 我不喜欢这个主意，因为我必须生成两个单独的文档。
在SVG本身中利用ECMAScript，找到一种方法来浮动<g> ，该<g>包含页面顶部的标题。 我喜欢这样，因为每当查看SVG时它都应该工作，但是我不确定如何完成此工作，并且会感谢任何指示或示例。

Answer 1

我在这里有第一种情况的示例：

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

另一种情况当然需要客户端启用脚本，并且确实有些闪烁（由于其完成方式：scroll event> dom operation> repaint），可以在此处看到完整的示例。

Answer 2

您不能只使用CSS吗？

#header_id {
    position: fixed;
    top : 0;
 }

编辑

抱歉，我被术语“对象”所吸引。 我认为svg是另一个文档的标题。 但是我检查了一下，W3C文档说您可以将CSS2定位应用于除最外层元素之外的任何内容。 让我知道这是否和我的想法一样简单。 我很想知道。

Answer 3

只是想一想，这可能超出或可能不在您的要求范围内。 您可以将页面内容放在带有svg滚动条的viewBox中。 即：

<svg>
  <g id='header'>Header</g>
  <svg viewBox='0 0 800 600'>Page Content</svg>
  <g id='scrollbar'></g>
</svg>

这将意味着在滚动条上进行大量的EMCAScript工作。 但是大多数应该可以在carto.net上找到：

也可以使用Aspect标签将viewBox的实际视口保持成比例。

我已经解决了一个相似的问题，即页眉和页脚保持固定，并使用在固定位置div中包含三个svg文档的html页面发现了最佳性能和灵活性。 在所有浏览器中均可完美运行，可真正调整大小，并在所有窗口尺寸下均可正确缩放。

Answer 4

您可以创建和定位多个<svg>元素，可以将其设置（至少根据我的经验在脚本中）为position:fixed ，这将起作用。 确保“浮动” svg区域在z顺序中位于顶部。

一个警告：Firefox在这样的浮动svg层上的“点击”功能与其他浏览器有所不同。 与以前的Firefox版本相比，Firefox 3.6更尊重pointer-events属性。 其他默认为允许点击。