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

html – 滚动时保持SVG对象静态,第1张

概述在我的Web应用程序中,我正在生成一个SVG文件,其中包含一个“标题”,当用户向下滚动图像时,我希望它在窗口顶部保持可见. 我可以想到两种方法来实现这一点,但我正在寻找任何其他明智的想法.我的两个想法是: >生成两个单独的SVG,一个是“标题”,一个是内容,然后只是将它们显示在两个不同的HTML< div>中.元素,允许较低的元素滚动.我不喜欢这个想法,因为我必须生成两个单独的文件. >在SVG本 在我的Web应用程序中,我正在生成一个SVG文件,其中包含一个“标题”,当用户向下滚动图像时,我希望它在窗口顶部保持可见.

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

>生成两个单独的SVG,一个是“标题”,一个是内容,然后只是将它们显示在两个不同的HTML< div>中.元素,允许较低的元素滚动.我不喜欢这个想法,因为我必须生成两个单独的文件.
>在SVG本身中使用ECMAScript并找到一种方法来浮动< g>包含页面顶部的标题.我喜欢这个,因为无论何时查看SVG它都应该可以工作,但我不知道如何实现这一目标并且会欣赏任何指针或示例.

解决方法 我有一个第一个案例 here的例子:
footer {    background: url(images/grasspat.svgz);    height: 64px; wIDth: 100%;    position: fixed; left: 0; right: 0; top: auto; bottom:0;}

另一种情况,当然要求客户端启用脚本,并且稍微闪烁(因为它是如何完成的:滚动事件> dom *** 作>重绘),可以看到完整的示例here.

总结

以上是内存溢出为你收集整理的html – 滚动时保持SVG对象静态全部内容,希望文章能够帮你解决html – 滚动时保持SVG对象静态所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://www.outofmemory.cn/web/1133556.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-30
下一篇 2022-05-30

发表评论

登录后才能评论

评论列表(0条)

保存