Как нарисовать несколько дуг в SVG круг в соответствии с каждым процентом дуги? - PullRequest
Новая
       56

Как нарисовать несколько дуг в SVG круг в соответствии с каждым процентом дуги?

2 голосов
/ 24 октября 2019

Мне нужно представить что-то вроде кольцевой диаграммы в SVG. Я пытался нарисовать несколько дуг внутри одного круга, каждая из которых имеет длину, определенную в процентах, которые были ранее получены. Но без удачи ...

Вот картинка:

enter image description here

Мне нужно, чтобы каждый регион был определен динамическисогласно ранее установленному проценту.

Кто-нибудь знает, как это можно сделать?

Ответы [ 2 ]

2 голосов
/ 25 октября 2019

@ user1835591 Что вы думаете об этом? 

<svg xmlns="http://www.w3.org/2000/svg" style="transform-origin:50% 50%;transform:rotate(270deg)" stroke-width="8%" fill="none" stroke-dasharray="400%">
 <circle cx="50%" cy="50%" r="25%" stroke="#ff8c00"/>
 <circle cx="50%" cy="50%" r="25%" stroke-dashoffset="284%" stroke="#7fffd4"/>
 <circle cx="50%" cy="50%" r="25%" stroke-dashoffset="318%" stroke="#228b22"/>
 <circle cx="50%" cy="50%" r="25%" stroke-dashoffset="352%" stroke="#6495ed"/>
 <circle cx="50%" cy="50%" r="25%" stroke-dashoffset="376%" stroke="#4169e1"/>
 <circle cx="50%" cy="50%" r="25%" stroke-dashoffset="390%" stroke="#ffa500"/>
</svg>
1 голос
/ 28 октября 2019

Вот как я использовал для разрешения аналогичной ситуации: 

<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 20 20">
  <circle r="5" cx="10" cy="10" stroke="red" stroke-width="10" />
  <circle r="5" cx="10" cy="10" stroke="green" stroke-width="10" stroke-dasharray="calc(60 * 31.42 / 100) 31.42" transform="rotate(-90) translate(-20)" />
  <circle r="5" cx="10" cy="10" stroke="yellow" stroke-width="10" stroke-dasharray="calc(40 * 31.42 / 100) 31.42" transform="rotate(-90) translate(-20)" />
  <circle r="5" cx="10" cy="10" stroke-width="10" fill="white" />
</svg>

Для расчета процентов Вам необходимо рассчитать процент для последнего круга «желтый», а затем для второго круга «зеленый»Вы должны рассчитать процент и сложить процент желтого круга.

Пример:

  • Желтый -> 20% -> calc ( 20 * 31,42 / 100) 31,42
  • Зеленый -> 30%-> calc ( 50 * 31,42 / 100) 31,42 (50 = 20 (желтый) + 30 (зеленый))
...