我如何用颜色填充SVG

Question

有人可以通过CSS和javascript帮助我吗？ 我需要用滚动动画创建一个页面。 https://meetlima.com/how-it-works.php?lang=zh-CN 1,2,3必须填充颜色。

 <div class="container"> <div class="een"> <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"> <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ --> <g> <title>Layer 1</title> <text stroke="#000000" transform="matrix(9.676384925842285,0,0,9.676384925842285,-1584.9315026253462,-1064.0772700458765) " xml:space="preserve" text-anchor="middle" font-family="Fantasy" font-size="24" id="svg_1" y="129.86676" x="174.14887" stroke-width="0" fill="#bfbfbf">1</text> </g> </svg> </div> </div> 

Answer 1

实际上，您在页面上共享的svg数字具有透明的颜色。

最初，您会看到div.how-it-works__step__bg__inner的灰色背景。

背面有一个div.how-it-works__faker ，它具有固定位置和最低z-index。 也具有蓝色背景的内部元素div.how-it-works__faker__inner

向下滚动时，您可能会在svg图像下看到div.how-it-works__faker__inner的一部分。

为了使其更加清晰，请检查此屏幕，以了解如果为div.how-it-works__faker设置了更高的z-index会发生什么情况

截图