我想根据某个百分比为矩形设置动画，以平滑地分成两种颜色，同时增加/减少标签中的百分比，如下图所示：
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 2165.4 1686.6" style="enable-background:new 0 0 2165.4 1686.6;" xml:space="preserve">
<style type="text/css">
.st1 { fill: #54A4DB; }
.st2 { font-family: 'Helvetica'; }
.st3 { fill: #FFFFFF; }
.st4 { font-size: 40px; }
</style>
<rect id="zone5" x="670.4" y="773.2" class="st1" width="1192.8" height="150.2"/>
<text transform="matrix(1 0 0 1 1176.7595 860.7599)" class="st3 st2 st4">1.00/0.00</text>
</svg>
对于分割效果，我认为在最坏的情况下，使用两个矩形并使用
为其中一个设置动画<animate attributeName="width" from="0" to="1192.8" dur="3s" fill="freeze"/>
但我非常感谢其他任何简单的方法，如果有的话。
但是对于标签，我不知道如何将值从一个平滑地更改为另一个