Как реализовать данный функционал с помощью SVG?
Почитай как делают рукописный текст на SVG https://css-tricks.com/animate-calligraphy-with-svg/snippet
я бы сегменты диаграммы делал stroke, без заливки - тогда можно спокойно применить манипуляции с stroke-dashoffset,  напрямую воздействуя на эти сегменты. 
В примере я дал им общий класс, и отдельные id, на случай, если нужны также манипуляции с конкретным сегментом по клику или hover какой то сслыки. Здесь hover по ссылке класса .line6-link воздействует через селектор + на следующий за ним сегмент с айдишником line6 - это просто пример, как видно, линк встроен в svg. Если в реальном проекте линки вынесены из svg, то воздействовать так просто не получится, надо будет скорее всего использовать js.snippet