SVG и stroke-dasharray объясните, пожалуйста?

Question

[HelpSophie]

Дано: https://jsfiddle.net/x194jwut/
stroke-dasharray="100% 100%"
1. Почему круг не разделился ровно пополам?
2. Как вычислить значения для круговых диаграмм? Например, соотношение 30% 45% 25%?

Answer 1

[Павел Волынцев]

Твоё решение прикольное, но не практичное. Позволяет только два сегмента сделать.

Если нужно больше сегментов, то можно "соорудить" более сложное изображение SVG, которое будет состоять из фрагментов окружности с разным цветом.

Вот пример: jsfiddle.net/NVX3S/2 - диаграмма генерируется с помощью библиотеки highcharts

Этот пример по сути генерирует вот такой код SVG https://jsfiddle.net/copist/zeoq7hbL/
Выглядит, конечно громоздко, но как видишь, никаких stroke-dasharray там не упоминается.

А вот так выглядит самая суть - фрагменты окружности разного цвета https://jsfiddle.net/copist/de9qL7kp/

Пример генератора круговой диаграммы в формате SVG для массива значений https://codepen.io/shshaw/pen/KpyNQq
Пример готовой круговой диаграммы в формате SVG с анимацией, без использования JS, на элементах <circle> https://codepen.io/ksksoft/pen/xsnmp

Comments

[HelpSophie]

Пока, мне надо максимум для 4х вариантов. Так что 4 circle значительно выгоднее, чем библиотека или та простыня кода.
Вычисляю через пи.

Просто казалось, что через %% проще и логичнее. Но почему-то %% ведут себя не так, как хотелось бы, а я не понимаю причины.