修改

Question

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

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

生成两个单独的SVG，一个是“标题”，一个是内容，然后只是将它们显示在两个不同的HTML <div>元素中，允许较低的SVG滚动。我不喜欢这个想法，因为我必须生成两个单独的文件。
在SVG本身中使用ECMAScript，并找到一种方法来浮动包含页面顶部标题的<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;
}

另一种情况，当然要求客户端启用脚本，并且稍微闪烁（因为它是如何完成的：滚动事件＆gt; dom操作＆gt;重绘），可以看到完整的示例{{ 3}}

Answer 2

你不能只使用CSS吗？

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

对不起，我被术语对象抛出了。我认为svg是另一个文件的标题。但我checked和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上提供：

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

我已经解决了类似的页眉和页脚问题以保持固定，并使用固定位置div中的三个svg文档的html页面找到了最佳性能和灵活性。适用于所有浏览器，调整非常流畅，并在所有窗口尺寸下正确缩放。

Answer 4

您可以创建和定位多个<svg>元素，您可以设置这些元素（至少在我自己的经验中的脚本中）为position:fixed，这样就可以了。确保您的“浮动”svg区域位于z顺序的顶部。

有一点需要注意：与其他浏览器相比，Firefox在浮动svg图层上的“点击”是不同的。 Firefox 3.6比以前版本的Firefox更好地尊重pointer-events属性。其他人默认允许点击。