Как нарисовать круговую секторную диаграмму на чистом css или с использыванием svg?

Question

[Phoenix_Bam]

Comments

[Ankhena]

Крутить без js? Плохо представляю.
Разве что вместе с монитором.

[Phoenix_Bam]

Ankhena, здравствуйте . Если честно моя сложность является в самой верстке секторов и центрального круга ((( пробую сейчас с помощью svg но вообще не выходит

[Phoenix_Bam]

Ankhena, Ankhena, не помогли бы вы сверстать саму диаграмму ? анимаця и пазлы для меня проще сделать ка бы странно не звучало

[Дмитрий Добрышин]

Phoenix_Bam, вот вам один из секторов.

<svg>
    <path
       style="fill:none;stroke:#000000;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
       d="M 127.64426,98.540554 C 121.95781,83.487905 110.89169,78.095744 99.218749,77.686029 V 54.339286 c -0.01423,-2.089667 -3.501862,-5.774257 -6.725289,-2.634371 -1.79172,1.644469 -3.011834,1.084176 -4.191148,0.366513 -3.149904,-2.019079 -2.589564,-5.573412 -0.422848,-7.181548 1.976319,-1.53242 3.560012,-1.213891 4.913691,0.188989 1.775722,2.23641 6.168513,0.532136 6.614583,-3.212798 V 14.651785 c 33.725932,0.06552 72.933742,19.270659 88.233822,64.421317 l -26.03312,8.409968 c -2.76917,0.175013 -6.80425,-1.652931 -4.93731,-5.551524 0.87324,-1.546658 0.57548,-2.926031 -0.75595,-4.157737 -2.53322,-2.062761 -5.79397,-1.771772 -7.37054,2.267855 -0.24012,1.813067 0.1863,3.139045 1.58278,3.756138 4.25601,1.692879 1.63869,6.295716 0.0236,7.18155 z"
       />
</svg>

[Ankhena]

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

[Phoenix_Bam]

Дмитрий Добрышин, спасибо огромное !!! Вы очень помогли

[Дмитрий Добрышин]

Ankhena, Контур проще обвести в inkscape. Да и что там обводить то? 8 кривых всего. Расставил узлы и мышкой вытянул нужный изгиб.

Мне интересно увидеть результат вращения без js ;-)

[Ankhena]

Дмитрий Добрышин, мне просто не доставляет это удовольствия.

Мне интересно увидеть результат вращения без js ;-)

Тоже жду с нетерпением.

[Phoenix_Bam]

Ankhena, проблема в том что я знаком с svg от силы 4 дня . И все мои "наставники" советуют делают через svg

[Phoenix_Bam]

Дмитрий Добрышин, а можно это реализовать на чистом css?

[Дмитрий Добрышин]

Phoenix_Bam, да, возможно. Описано здесь.

Вообще вы меня удивляете, говорите, что знаете как реализовать вашу задачу, но сектор (1/5 окружности) не можете повернуть ещё 4 раза. svg удобен тем, что в нём всё записано в виде векторов по координатам и требует значительно меньших усилий, чем рисование той же прямой средствами css.

[Ankhena]

Phoenix_Bam,

И все мои "наставники" советуют делают через svg

Потому что это разумно.
Дальше зависит от анимации. Либо просто на фон либо инлайном и там развлекаться.
Текст сверху абсолютами.

[Phoenix_Bam]

Ankhena, @DimkaI

<input type = "checkbox" id = "anim" class = "input" />	
			<label class="main" for="anim">

вот эта конструкция позволяет создавать анимацию без js (хотя толку лахматить бабушку ???__:)__ )

[Ankhena]

Phoenix_Bam, угу, такое себе