Выравнивание индикатора выполнения SVG с динамическими ромбовидными формами в столбцах Bootstrap ⇐ Jquery

[Гость]

Вот что я, по сути, пытаюсь воссоздать КодПен

Какое-то имя Какое-то имя Какое-то имя функция formatProgressBar() { вар этапы = []; //Множество // вар GateWidth = 220; // var GateWidth = document.getElementById('progressbarmain').offsetWidth - 50; // если (стадии >= 5) { // // Устанавливаем ширину шага бара // $("#stepbar").css("width",gateWidth * stage + "px"); // } // еще { // // $("#stepbar").addClass('container'); // // $("#stage").addClass('mx-2'); // }; // Перезагрузить вар ворота = $('.scale'); // Gates.addClass('d-none d-sm-flex'); Gates.removeClass("Завершен активный выбранный ожидающий текст-первичный"); for (var я = 0; я i:after { содержимое: " " "\f00c"; семейство шрифтов: «Шрифт Awesome 5 Pro»; } .gateDiamond { z-индекс: 3; черный цвет; заполнить: #EACA2B; штрих: #000000; соединение штрих-линии: скос; } .gateDiamond текст { заливка: чёрная; инсульт: нет; } .Сценический псевдоним { z-индекс: 8; семейство шрифтов: без засечек; позиция: абсолютная; выбор пользователя: нет; выравнивание текста: по центру; переход: легкость трансформации 0,2 с; стиль шрифта: нормальный; -webkit-font-smoothing: сглаживание; белый цвет; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1 пиксель 1 пиксель 0 #000; переполнение текста: многоточие; размер шрифта: 0,85vw; максимальная ширина: 60%; осталось: 20%; правильно: 20%; } .scale:hover { преобразование: масштаб (1.1); } .scale.active { преобразование: масштаб (1.2); преобразование-происхождение: центр; маржа: авто; } .scale.pending { заливка: светло-серая; заполнить: #E2F2FC; } .scale.selected { заливка: #3078C2; } .scale.completed { заливка: #3078C2; } У меня возникли проблемы с выравниванием фигур по центру, поскольку фигуры выходят за пределы окон просмотра. (или окна просмотра выходят за пределы системы/контейнера столбцов начальной загрузки?)

Кроме того, я не знаю, как динамически заставить последнюю ромбовидную форму появляться над последним классом сцены; не нарушая остальную часть индикатора выполнения. Думаю, нам нужно установить высоту после вставки. clonedDiamond (lastDiamond) где-то внутри контейнера/степбара.

О том, чтобы телефоны были отзывчивыми (для экранов среднего и большого размера), сейчас не стоит беспокоиться. Я использую для этого начальную загрузку, но в этом случае у svg/polygons есть слабые места.

Также может быть переменное количество шагов(этапов), извлекаемых из массива объектов. .
[*]
Этапы имеют приоритет (самая большая форма)
[*]
Ромбы должны быть меньшего размера, но с читаемыми промежутками между формами.
[*]
Алмаз на последнем этапе – не «предшествовать» ему, а быть над ним.
[*]
Последний бриллиант должен оставаться внутри контейнера
[*]
не нарушая другие фигуры и не выходя за пределы.

--
[*]
Можно использовать jQuery
[*]
Можно использовать начальную загрузку
[*]
Можно использовать CSS, если это лучше/применимо
[*]
Я пытался перейти от svg/полигонов к чистым CSS-формам с границами. Когда я пытался, у этого были недостатки в отношении систем начальной загрузки.
[*]
Пыталась изменить значения окна просмотра, чтобы они лучше соответствовали целям.
[*]
пробовал пути обрезки CSS, но при создании текстового клипа, конечно, были недостатки.