滚动时如何填充svg答案

【问题标题】：How to fill svg when scrolling滚动时如何填充svg
【发布时间】：2015-02-22 17:17:04
【问题描述】：

我有 svg 线：

<svg class="filling" width="500" height="10" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <path data-over-line="" d="M90,5 L500,5" stroke="#e2e2e2" fill="transparent" stroke-width="4" 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

标签： javascript jquery animation svg jquery-animate

【解决方案1】：

我不确定您最终希望滚动条的形状是什么，但这里有一个简单的解决方案。我们在您的灰线上方画一条蓝线以指示滚动进度。行的长度是通过计算页面滚动的距离来确定的。

如果您最终希望滚动条是线条或矩形以外的形状，则需要采用不同的方法。

SVG（稍作修改）：

<svg class="filling" width="500" height="10" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <line x1="90" y1="5" x2="500" y2="5" stroke="#e2e2e2" fill="transparent" stroke-width="4" />
    <line x1="90" y1="5" x2="90" y2="5" stroke="blue" fill="transparent" stroke-width="4" 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

【讨论】：