如何在滚动页面时填充svg颜色？

要在滚动页面时填充SVG颜色，你可以使用JavaScript来监听滚动事件，并根据滚动的距离来改变SVG元素的填充颜色。以下是一个基本的实现示例：

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Scroll to Fill SVG Color</title>
    <style>
        body {
            height: 2000px; /* 确保页面有足够的滚动空间 */
        }
        #mySvg {
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
    <svg id="mySvg" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
        <rect id="myRect" x="10" y="10" width="80" height="80" fill="blue"/>
    </svg>
    <script src="script.js"></script>
</body>
</html>

JavaScript部分（script.js）

document.addEventListener('DOMContentLoaded', function() {
    const svgRect = document.getElementById('myRect');
    const maxScroll = document.body.scrollHeight - window.innerHeight;

    window.addEventListener('scroll', function() {
        const scrollPercentage = window.scrollY / maxScroll;
        const newColor = `rgb(${scrollPercentage * 255}, 0, ${255 - scrollPercentage * 255})`;
        svgRect.setAttribute('fill', newColor);
    });
});

解释

HTML部分：
- 创建一个SVG元素，其中包含一个矩形（<rect>）。
- 设置一个足够高的<body>，以便可以滚动。

JavaScript部分：
- 监听DOMContentLoaded事件，确保DOM完全加载后再执行脚本。
- 获取SVG矩形元素。
- 计算最大滚动距离maxScroll。
- 监听scroll事件，计算当前滚动的百分比。
- 根据滚动百分比计算新的颜色值，并将其应用到SVG矩形的填充颜色上。