Я застрял с круговой диаграммой, которая должна анимироваться по часовой стрелке при загрузке. Вот моя скрипка с круговой диаграммой
Мне нужна эта анимация для работы с кривыми брезиера, например,
<path d="M 276 63.03 C 329.93 63.03 381.86 78.24 421.4 105.63 L 276 222.79 M 276 63.03" />
Я также знаю, что этого можно добиться с помощью библиотеки snap.svg, но в этом случае это невозможно.
Любая помощь приветствуется.
Заранее спасибо!
Вы можете использовать вложенный animate и изменить какой-либо атрибут с прогрессивной задержкой.
В этом примере я поместил обводку g внутри заливки g для каждого фрагмента и добавил внутри элемент animate, каждая анимация начинается с 0,5 секунды. Я анимировал атрибут opacity (поэтому я добавил атрибут opacity="0" для каждого элемента, вы можете заменить его другим атрибутом). Это второй фрагмент:
<g id="pieFillSection2" opacity="0" style="fill: yellow;fill-opacity: 1.0; stroke: none" transform="matrix(1,0,0,1,0,0)" >
<animate attributeName="opacity" from="0" to="1"
begin="0.5s" dur="1s" fill="freeze"/>
<path d="M 421.4 105.63 C 483.64 148.74 505.87 215.26 478.05 275.16 C 450.23 335.05 377.64 377 293.04 382.05 L 276 222.79 M 421.4 105.63" />
<g class="pieStroke" id="pieStrokeSection2" style="stroke-width: 1.0;stroke: rgb(128,128,128);stroke-opacity: 1.0; fill: none" transform="matrix(1,0,0,1,0,0)" >
<path d="M 421.4 105.63 C 483.64 148.74 505.87 215.26 478.05 275.16 C 450.23 335.05 377.64 377 293.04 382.05 L 276 222.79 M 421.4 105.63" />
</g>
</g>
Проверьте обновленный JSFiddle.
