如何用颜色填充 SVG答案

【问题标题】：How do i fill SVG with color如何用颜色填充 SVG
【发布时间】：2018-02-06 00:56:05
【问题描述】：

有人可以帮我处理 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>

【问题讨论】：

attribute fill 应该改变你的 1,2 和 3 的字体颜色
滚动网页时svg需要改变颜色。灰色 => 颜色...

标签： javascript jquery html css svg

【解决方案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

【讨论】：