滚动时如何填充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的主要内容,如果未能解决你的问题,请参考以下文章

用作 base-64 背景图像数据时如何更改 svg 填充颜色?

如何在悬停时更改 svg 填充

如何使用 CSS 填充 SVG [重复]

如何将 SVG 的填充颜色更改为背景图像? [复制]

悬停按钮时如何更改svg颜色

SVG可以是透明填充吗? [复制]