如何用颜色填充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

实际上，在您已经共享为exapmle的页面上，svg编号具有透明色。

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

背面有一个位置固定、z指数最低的div.how-it-works__faker。也有蓝色背景的内部元素div.how-it-works__faker__inner

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

为了更清楚，请检查此屏幕，以便了解在为div.how- it -works__faker设置更高的z-index时会发生什么

screenshot