滚动时保持SVG对象静止 [英] Keep an SVG Object static while scrolling
问题描述
我可以想到两种方法来完成这个任务,但我正在寻找其他任何明智的想法。我的两个想法是:
-
生成两个单独的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屋!