我如何用颜色填充SVG

Question

Can somebody help me with css and javascript? I need to create a page with scroll animation. https://meetlima.com/how-it-works.php?lang=en The 1,2,3 must be filled with color.

 <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

In fact on page you've shared as exapmle the svg numbers have transparent color.

Initially you see grey background of div.how-it-works__step__bg__inner .

On backface there is a div.how-it-works__faker which has fixed position and lowest z-index. Also has inner element div.how-it-works__faker__inner with blue background

And when you scrolling down you may see the part of div.how-it-works__faker__inner under svg image.

to make it more clear check this screen just to understand what would happens in case you set higher z-index for div.how-it-works__faker

screenshot