Question

如何在 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>

Answer 1

它适用于面具：

<svg width="200" height="190">
 <g transform="translate(0,-35)">
  <mask id="shape-mask">
    <rect x="0" y="0" width="200" height="230" fill="black" />
    <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" fill="white" />
  </mask>
  
  <rect y="230" width="200" height="0" fill="orange" mask="url(#shape-mask)">
          <animate attributeName="y" values="230 ; 0" dur="2.5s"/>
          <animate attributeName="height" values="0 ; 230" dur="2.5s"/>
  </rect>

        <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"/>
        <circle cx="78.3" cy="60.5" r="6.5"/>
        <circle cx="38.2" cy="60.5" r="6.5"/>
        <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> 
</svg>

SVG 填充路径元素

1 个答案: