SVG круговая анимация с изменением радиуса
У меня круговая анимация на 10 секунд по кругу svg.
В тот момент, когда я пытаюсь сменить r = "30" на обоих кругах, анимация срабатывает и длится всего 5 секунд. Я думаю, что вместе со значением r мне пришлось бы изменить значения cx и cy соответственно, чтобы они имели правильный размер и чтобы анимация длилась 10 секунд. Не могли бы вы указать, что происходит не так?
Вот ссылка: https://codepen.io/anon/pen/jxREMd
Вот фрагмент:
<svg class = "progress-circle definite" width = "100" height = "100">
<defs>
<linearGradient id = "linear" x1 = "0%" y1 = "0%" x2 = "100%" y2 = "0%">
<stop offset = "0%" stop-color = "transparent"/>
<stop offset = "100%" stop-color = "black"/>
</linearGradient>
</defs>
<g transform = "rotate(-90,50,50)">
<circle class = "bg" r = "40" cx = "50" cy = "50" fill = "url(#linear)"></circle>
<circle class = "progress" r = "40" cx = "50" cy = "50" fill = "none"></circle>
</g>
</svg>
Ответы 1
Из вашего вопроса я предполагаю, что вы, должно быть, уменьшаете радиус круга. Я прав?
Если вы уменьшите радиус круга, длина окружности также уменьшится. Значение «251» в свойстве stroke-dashoffset соответствует длине окружности.
circumference = 2*PI*r = 2*PI*40 ~= 251
Анимация работает за счет смещения положения штрихового рисунка, так что создается впечатление, что он медленно рисует линию.
Если вы уменьшите радиус вдвое, длина окружности также уменьшится вдвое. Если вы также не исправите stroke-dashoffset, анимация будет завершена в два раза быстрее. Это потому, что анимация уже достигла новой окружности 126 через 5 секунд.
Чтобы исправить это, просто обновите значение stroke-dashoffset до 126.
Если вы хотите использовать радиус, отличный от 20, вам также необходимо определить правильную окружность / stroke-dashoffset для этого.
.progress-circle.definite .progress {
stroke: orange;
stroke-width: 2;
stroke-dashoffset: 0;
stroke-dasharray: 126;
animation: progress-anim 10s ease;
}
.progress-circle.definite .bg {
stroke: white;
stroke-width: 2;
}
@keyframes progress-anim {
0% { stroke-dashoffset: 126; }
100% { stroke-dashoffset: 0; }
}
// indefinite<svg class = "progress-circle definite" width = "100" height = "100">
<defs>
<linearGradient id = "linear" x1 = "0%" y1 = "0%" x2 = "100%" y2 = "0%">
<stop offset = "0%" stop-color = "transparent"/>
<stop offset = "100%" stop-color = "black"/>
</linearGradient>
</defs>
<g transform = "rotate(-90,50,50)">
<circle class = "bg" r = "20" cx = "50" cy = "50" fill = "url(#linear)"></circle>
<circle class = "progress" r = "20" cx = "50" cy = "50" fill = "none"></circle>
</g>
</svg>Спасибо за прекрасное объяснение и решение. Бог благословил!
окружность круга зависит от его радиуса, поэтому длина штриха, которую вы должны покрыть, изменяется вместе с радиусом, следовательно, значения stroke-dasharray тоже.