Css SVG填充路径元素

如何在SVG中用颜色填充路径元素？在下方区域，我添加了一个rect元素，效果很好。但是我怎样才能填满剩下的（脑袋）

SVG如下所示

这是我的SVG代码

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 110.6 225.5" style="enable-background:new 0 0 110.6 225.5" xml:space="preserve">
  <style type="text/css">
    .st2{
    fill:#FEC400;
    }
}
  </style>
  <g>
    <g>
      <g>
        <!-- mouth -->
        <path d="M56.9,94c-4.7,0-9.3-1.3-13.4-3.7c-3.8-2.2-6.9-5.4-9.2-9.1c-0.9-1.5-0.4-3.5,1.1-4.4s3.5-0.4,4.4,1.1
                c1.7,2.8,4.1,5.2,7,6.9c4.6,2.7,10,3.5,15.2,2.2s9.6-4.6,12.3-9.2c0.9-1.5,2.9-2,4.4-1.1s2,2.9,1.1,4.4
                c-3.6,6.1-9.4,10.4-16.2,12.2C61.3,93.7,59.1,94,56.9,94z"/>
      </g>
      <g>
        <!-- eye -->
        <circle cx="78.3" cy="60.5" r="6.5"/>
      </g>
      <g>
        <!-- eye -->
        <circle cx="38.2" cy="60.5" r="6.5"/>
      </g>
      <g>
        <!-- lower -->
        <rect class="st2" x="5" y="220" width="24" height="90">
          <animate attributeName="y" values="220 ; 100" dur="2.5s"/>
          <animate attributeName="height" values="90 ; 120" dur="2.5s"/>
        </rect>
      </g>
      <g>
        <!-- figure, needs to fill up with color -->
        <path d="M26.9,225.5H3.2c-1.8,0-3.2-1.4-3.2-3.2v-146c-0.1-19.2,21.4-36.8,50-40.9c14.4-2.1,28.6-0.4,39.8,4.7
                c11.7,5.4,19,13.8,20.4,23.8l0,0c3,21.2-11.1,37.6-37.9,43.9c-13.6,3.2-30.9,1.1-42.3-3v117.3C30.1,224.1,28.6,225.5,26.9,225.5z
                 M6.4,219.1h17.3V100.2c0-1.1,0.6-2.1,1.5-2.7s2.1-0.6,3.1-0.2c9.6,4.7,28.6,7.7,42.6,4.4c23.2-5.5,35.6-19.3,33-36.8
                c-1.1-7.8-7.1-14.5-16.7-18.9c-10.1-4.6-23-6.1-36.3-4.2c-25,3.6-44.6,18.8-44.5,34.5C6.4,76.3,6.4,219.1,6.4,219.1z"/>
      </g>
    </g>
  </g>
</svg>

.st2{
填充：#FEC400；
}
}

它与遮罩一起工作：

---

我目前没有时间回答问题，但您不能使用带有svg主体组剪辑路径的div吗？然后，您可以只设置div高度的动画，它将进行适当的剪裁