Как сверстать круговую диаграмму с фоновым изображением?

Question

[Константин]

Добрый день. Возникла необходимость сверстать круговую диаграмму с фоновым изображением, что бы можно было редактировать процент заполнения. Пытался сделать с помощью SVG, но скудные знания в этой области не позволили это реализовать. Причем нужно решение без использования jQuery библиотек, можно на ванильном JS, либо с использованием VUE.
UPD: Полупрозрачная подложка под диаграммой просто отдельное изображение, которого потенциально может и не быть. Интересует только создание диаграммы.
UPD 2: Тенью можно пожертвовать, это не проблема.

Comments

[poniyur]

нашел такую https://codepen.io/anchen/pen/myoZBx
Только html выберите compiled

[Константин]

poniyur, Увы, но в приведенном примере не используется фоновое изображение, а в этой задаче это как раз является критерием повышающим ее сложность. В добавок используется jQuery и обращение к непонятному скрипту, к которому не получается достучаться (по крайней мере с моего компьютера).

[poniyur]

Константин, не заметил, сорян

Answer 1

[RAX7]

Comments

[Константин]

Огромное спасибо! Краткость этого решения меня поражает!

[RAX7]

Константин, пожалуйста. С тенью тоже можно что-нибудь придумать
https://jsfiddle.net/RAX7/zaptL0nb/1/

[Максим]

RAX7, без тени на лисе лучше - салам

[Константин]

RAX7, Супер! Давно собирался изучить работу с SVG, вот и очередная причина сделать это как можно скорей.

[RAX7]

Максим Ленский, вот как наверное лучше будет https://jsfiddle.net/RAX7/gc8Lmnqp/

[Максим]

RAX7, твой ответ уже на стаковерфлоу хотят видеть ....ты там есть ?
https://ru.stackoverflow.com/q/1012931/308951

[RAX7]

Максим Ленский, меня там нету, можешь продублировать ответ, если не лень=)

[Максим]

RAX7, решение не моё ..я не копипастер ..

[RAX7]

Максим Ленский, тогда подождем, там на SO кто-то собирается сделать без svg

[Максим]

RAX7, https://ru.stackoverflow.com/a/1012963/308951 вот кстати и ответ тоже на svg но у него уникальный подход

[RAX7]

Максим Ленский, интересное решение, я думал одной аркой такое не сделать на svg, а двумя геморно будет

[forspamonly2]

Максим Ленский, как-то сложно там всё. можно же куда проще - нарисовать круг достаточно толстой обводкой (вдвое больше радиуса круга). тогда не придётся считать руками точки на дуге и всё остальное... более того, можно заранее посчитать размеры, чтобы длина окружности равнялась сотне, потом растянуть в цсс, и тогда в рантайме вообще ничего считать не придётся - заполненность будет задаваться сразу в процентах.

о, блин. не доглядел что у RAX7 примерно так и сделано. мне почему-то сначала показалось что он на clip-path делает.

Answer 2

[forspamonly2]

имхо, самый простой вариант:

жабаскрипт там вообще не нужен - чисто для интерактивности добавлен.