Как разместить элементы по дуге?

Question

[tvsjke]

Есть n элементов, как мне их разместить по дуге ? В говолу кроме position:absolute ничего не приходит.



Спасибо=)

Answer 1

[Петр]

SVG
Canvas

Comments

[tvsjke]

Можно ссылку на пример подобного (хотя бы отдалённо) ?

[Петр]

tvsjke: https://developers.google.com/chart/interactive/do...

[Петр]

tvsjke: Совсем близко https://jsfiddle.net/ut5g9s9r/

Answer 2

[Ivan Bogachev]

Как разместить элементы по дуге?

1. Оторвать голову дизайнеру
   
2. Дальше варианты:
   
   • Можно с помощью CSS transforms (вот пример с кругом, ваша дуга - кусок очень большого круга). Плюсы - чистый CSS, уважение окружающих. Минусы: чтобы что-то изменить нужно слишком много усилий.
     
   • Нарисовать на cancas. Плюсы - можно соорудить поддержку старых браузеров. Минусы - 21 век, пора переходить на SVG.
     
   • Собственно SVG. Для упрощения процесса - Snap.svg. Плюсы - можно сделать хорошо поддерживаемый плагин, где каждый круг с надписью - отдельный компонент, такое будет не стыдно и на GitHub выложить. Минусы - не завидую вашему дизайнеру...
     
     
   
   

Comments

[Алексей Бурлака]

Первый пример — на чём это написано?
.circle
.text Our Team
each val in [69,64,65,52,41,33,22,15,11]
.image-wrapper
img.image(src='//i.pravatar.cc/300?img=' + val)

[Ivan Bogachev]

Алексей Бурлака: pug (бывший jade) - препроцессор для html

[Алексей Бурлака]

Блин, это прекрасно.

Answer 3

[Алексей Струков]

Через svg это можно сделать, вроде