javascript - 我如何用颜色填充SVG

Question

有人可以帮我处理 css 和 javascript 吗？ 我需要创建一个带有滚动动画的页面。 https://meetlima.com/how-it-works.php?lang=en 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 会发生什么

screenshot