Я хочу анимировать прямоугольник на основе некоторого процента, чтобы плавно разделить на 2 цвета и в то же время проценты для увеличения / уменьшения метки, как показано ниже:
<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"/>
, но я очень ценюлюбой другой более простой метод, если он есть.
Но для метки я понятия не имею, как плавно изменить значение с одного на другое