滚动时保持SVG对象静止 [英] Keep an SVG Object static while scrolling

问题描述

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

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

• 生成两个单独的SVG，一个是标题，一个是内容，他们在两个不同的HTML < div> 元素中，允许下面的元素滚动。我不喜欢这个想法，因为我将不得不生成两个单独的文档。

利用SVG本身的ECMAScript并找到一种浮动< g> ，其中包含页面顶部的标题。我喜欢这样，因为无论什么时候SVG被查看都应该可以工作，但我不知道如何实现这一点，并会欣赏任何指针或示例。

解决方案

我有第一个案例这里：

 页脚{
背景：url（images / grasspat.svgz）; 
 height：64px;宽度：100％; 
位置：固定;左：0;正确：0; top：auto;底部：0; 
} 
  

另一种情况当然需要客户端启用脚本，并做闪烁一点（因为它是如何完成的：滚动事件> DOM操作>重绘），一个完整的例子可以看到这里。

In my web application, I am generating a SVG file which contains a "header" that I would like to keep visible at the top of the window as the user scrolls down the image.

I can think of two ways of accomplishing this, but am looking for any other bright ideas. My two thoughts are:

• Generate two separate SVGs, one being the "header" and one being the content and then simply displaying them in two different HTML <div> elements, allowing the lower one to scroll. I don't like this idea because I would have to generate two separate documents.

• Utilise ECMAScript in the SVG itself and find a way to float the <g> that contains the header at the top of the page. I like this, because whenever the SVG is viewed it should work, but I am not sure how to accomplish this and would appreciate any pointers or examples.

解决方案

I've got an example of the first case here:

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

The other case, which will of course require the client to have script enabled, and does flicker a bit (because of how it's done: scroll event > dom operation > repaint), a full example can be seen here.

这篇关于滚动时保持SVG对象静止的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！