滚动时如何填充svg
Posted
技术标签:
【中文标题】滚动时如何填充svg【英文标题】:How to fill svg when scrolling 【发布时间】:2015-02-22 17:17:04 【问题描述】:我有 svg 线:
<svg class="filling" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path data-over-line="" d="M90,5 L500,5" stroke="#e2e2e2" fill="transparent" stroke- style="stroke-dashoffset: 0px;"></path>
</svg>
我需要在滚动页面时逐渐填充不同的颜色。怎么做?
【问题讨论】:
你试过window.onscroll
吗?
@micnic,我知道。我不知道什么机制可以帮助流畅地改变 svg 线的颜色。
您要更改填充还是描边?您在问题中提到了一个,在之前的评论中提到了一个。
SVG 滚动路径 ...(中风)cbron.github.io/blog/2013/12/30/…
SVG 填充滚动...codyhouse.co/gem/icons-filling-effect
【参考方案1】:
我不确定您最终希望滚动条的形状是什么,但这里有一个简单的解决方案。我们在您的灰线上方画一条蓝线以指示滚动进度。行的长度是通过计算页面滚动的距离来确定的。
如果您最终希望滚动条是线条或矩形以外的形状,则需要采用不同的方法。
SVG(稍作修改):
<svg class="filling" version="1.1" xmlns="http://www.w3.org/2000/svg">
<line x1="90" y1="5" x2="500" y2="5" stroke="#e2e2e2" fill="transparent" stroke- />
<line x1="90" y1="5" x2="90" y2="5" stroke="blue" fill="transparent" stroke- id="scrollprogress" />
</svg>
JS:
window.onscroll = function (event)
var offset = window.pageYOffset;
var wheight = window.innerHeight;
var html = document.documentElement;
var docheight = Math.max(document.body.scrollHeight, document.body.offsetHeight,
html.clientHeight, html.scrollHeight, html.offsetHeight);
var progress = offset / (docheight - wheight);
// Give the line a CSS gradient based on scroll position
document.getElementById("scrollprogress").setAttribute("x2", 90 + progress * 410);
Demo fiddle
【讨论】:
以上是关于滚动时如何填充svg的主要内容,如果未能解决你的问题,请参考以下文章