Как сделать сектор круга SVG
<style>
.pie { /* область */
width: 12em; /* ширина */
border: 1px solid #000;
}
.pie path { /* сектора */
stroke: black; /* цвет обводки */
stroke-width: 2; /* ширина обводки */
}
.pie path:nth-of-type(1) { /* первый сектор */
fill: #00ff00; /* цвет */
}
.pie path:nth-of-type(2) { /* второй сектор */
fill: #ff0000;
}
.pie path:nth-of-type(3) {
fill: #0000ff;
}
</style>
<svg viewBox="0 0 200 200" class="pie">
<path d="M100,100 L10,100 A90,90 0 0,1 172.81,47 Z"></path>
</svg>
viewBox="0 0 200 200" — ширина и высота области просмотра M100,100 — координата центра окружности L10,100 — прямая линия от центра до левого края не доходит 10 единиц и является начальной точкой дуги A90,90 0 0,1 172.81,47 — дуга эллипса (elliptical arc) A90,90 — радиус круга, так как значения равны 0 — вращение относительно оси X 0,1 — флажки: короткая или длинная дуга, направление против или по часовой стрелке 172.81,47 — координата конечной точки дуги для 40% Z — замкнуть конечную точку с начальной
В круге 360°. Круг составляет 100%. То есть 1% = 3,6°.
Тригонометрическая окружность (радианы)
Второй сектор
<svg viewBox="0 0 200 200" class="pie"> <path d="M100,100 L10,100 A90,90 0 0,1 172.81,47 Z"></path> <path d="M100,100 L172.81,47 A90,90 0 0,1 185.595,127.81 Z"></path> </svg>
Значения path SVG
172.81,47 — то же, что у первого path 185.595,127.81 — координата конечной точки дуги для 55% = 40% + 15%
Последний сектор
<svg viewBox="0 0 200 200" class="pie"> <path d="M100,100 L10,100 A90,90 0 0,1 172.81,47 Z"></path> <path d="M100,100 L172.81,47 A90,90 0 0,1 185.595,127.81 Z"></path> <path d="M100,100 L185.595,127.81 A90,90 0 0,1 10,100 Z"></path> </svg>
Превосходная статья «Pie Are Square - Charting with SVG» [codestore.net] 2002 года!
Как сделать сегмент круга SVG
<svg viewBox="0 0 200 200" class="pie"> <path d="M10,100 A90,90 0 0,1 172.81,47 Z"></path> </svg>
Значения path SVG
M10,100 — построение фигуры с начальной точки дуги
Как сделать дугу круга SVG
<style>
.pie {
width: 12em;
border: 1px solid #000;
}
.pie path {
stroke: black;
stroke-width: 2;
}
.pie path:nth-of-type(1) {
fill: none; /* без заливки */
}
</style>
<svg viewBox="0 0 200 200" class="pie">
<path d="M10,100 A90,90 0 0,1 172.81,47"></path>
</svg>
Значения path SVG
отсутствует Z — фигура незамкнута
Более легкий способ с помощью stroke-dasharray у circle
<style>
.pie {
width: 12em;
border: 1px solid #000;
}
.pie circle {
stroke: black;
stroke-width: 2;
fill: none;
stroke-dasharray: 0 282.7431 226.19448 565.4862; /* пунктир обводки */
}
</style>
<svg viewBox="0 0 200 200" class="pie pie1">
<circle r="90" cx="100" cy="100" ></circle>
</svg>
Значения circle SVG
cx и cy — координаты центра окружности r — радиус окружности Длина окружности C=2πr C = 2 * 3.14159 * 90 = 565.4862 1% = 565.4862 : 100% = 5.654862 0 282.7431 226.19448 565.4862 0 — без дуги с середины правой стороны до 282.7431 282.7431 = 50% * 5.654862 — начало дуги с середины левой стороны 226.19448 = 40% * 5.654862 — конец дуги 565.4862 — длина окружности, чтобы пунктир не повторился
Круговая диаграмма с промежутками
<style>
.pie {
width: 12em;
}
.pie path {
stroke: white; /* цвет = однотонный фон сайта */
stroke-width: 3;
}
.pie path:nth-of-type(1) {
fill: #00ff00;
}
.pie path:nth-of-type(2) {
fill: #ff0000;
}
.pie path:nth-of-type(3) {
fill: #0000ff;
}
</style>
<svg viewBox="0 0 200 200" class="pie">
<path d="M100,100 L10,100 A90,90 0 0,1 172.81,47 Z"></path>
<path d="M100,100 L172.81,47 A90,90 0 0,1 185.595,127.81 Z"></path>
<path d="M100,100 L185.595,127.81 A90,90 0 0,1 10,100 Z"></path>
</svg>
Сектор сдвигается при наведении курсора мышки
<style>
.pie {
width: 12em;
}
.pie path {
stroke: black
stroke-width: 2;
transition: .5s; /* плавное изменение */
}
.pie path:nth-of-type(1) {
fill: #00ff00;
}
.pie path:nth-of-type(2) {
fill: #ff0000;
}
.pie path:nth-of-type(3) {
fill: #0000ff;
}
.pie path:nth-of-type(1):hover {
transform: translate(-2.77947px, -8.549px); /* смещение */
}
.pie path:nth-of-type(2):hover {
transform: translate(8.889px, -1.407px);
}
.pie path:nth-of-type(3):hover {
transform: translate(-1.407px, 8.88915px);
}
</style>
<svg viewBox="0 0 200 200" class="pie">
<path d="M100,100 L10,100 A90,90 0 0,1 172.81,47 Z"></path>
<path d="M100,100 L172.81,47 A90,90 0 0,1 185.595,127.81 Z"></path>
<path d="M100,100 L185.595,127.81 A90,90 0 0,1 10,100 Z"></path>
</svg>
Отодвинуть центр сектора текущего радиуса к центру сектора того же значения большего радиуса. Отступы между двух сторон сектора получаются одинаковые, но отступы разных секторов — разные. Может кто знает как получить одинаковые интервалы между секторами при смещении? Есть только не очень удачное предположение, что нужно сдвигать сектора на разные расстояния от центра.
40% : 2 = 20% 99 радиус | 69.409 | 5.851 90 радиус | 72.18847 | 14.4 разница | -2.77947 | -8.549 40% + 15% : 2 = 47.5% 99 радиус | 197.781 | 84.513 90 радиус | 188.89195 | 85.92 разница | 8.889 | -1.407 55% + 45% : 2 = 77.5% 99 радиус | 84.512988 | 197.7811 90 радиус | 85.92 | 188.89195 разница | -1.407 | 8.88915
Сектор увеличивается при наведении курсора мышки
<style>
.pie {
width: 12em;
}
.pie path {
stroke: black
stroke-width: 2;
transform-origin: center;
transition: .5s;
}
.pie path:hover {
transform: scale(1.1);
}
.pie path:nth-of-type(1) {
fill: #00ff00;
}
.pie path:nth-of-type(2) {
fill: #ff0000;
}
.pie path:nth-of-type(3) {
fill: #0000ff;
}
</style>
<svg viewBox="0 0 200 200" class="pie">
<path d="M100,100 L10,100 A90,90 0 0,1 172.81,47 Z"></path>
<path d="M100,100 L172.81,47 A90,90 0 0,1 185.595,127.81 Z"></path>
<path d="M100,100 L185.595,127.81 A90,90 0 0,1 10,100 Z"></path>
</svg>