Как сделать горизонтальный список колец с текстом внизу

Я пытаюсь реализовать следующий элемент с помощью HTML/CSS:

Список с подключенными кольцами

Я застрял, пытаясь понять, как сделать так, чтобы текст отображался под кольцами. Я пытался сделать кольца, используя URL-адреса данных SVG, например:

SVG:

<svg aria-hidden='true' focusable='false'>
  <circle cx="25" cy="25" r="20" stroke="black" stroke-width="2" fill="transparent" />
</svg>

Закодировано с использованием https://yoksel.github.io/url-encoder/.

background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' focusable='false'%3E%3Ccircle cx='25' cy='25' r='20' stroke='black' stroke-width='2' fill='transparent' /%3E%3C/svg%3E ");

Я просмотрел несколько примеров, и один из наиболее близких — степпер Angular Material Stepper по адресу https://material.angular.io/components/stepper/examples, но я не знаю, как вообще начать создавать этот элемент. Что касается HTML, я думаю, что что-то вроде следующего фрагмента кода должно подойти.

<ul class="ratings">
    <li>Gering</li>
    <li>Mittel</li>
    <li class="active">Hoch</li>
    <li>Sehr hoch</li>
</ul>

Для контекста предполагается, что это станет неинтерактивным элементом отображения в веб-приложении Angular. Поддержка IE вообще не требуется, поэтому решение с использованием современного CSS (я использую SCSS) было бы идеальным.

Я был бы очень признателен, если бы кто-нибудь, более опытный в таком продвинутом CSS, мог бы дать мне несколько советов о том, как создать этот элемент. В крайнем случае я бы использовал растровую графику, но результат был бы значительно хуже. Заранее спасибо!

Что я пробовал до сих пор:

Обновление: мое решение пока основано на выбранном ответе: https://jsfiddle.net/fkquce21/3/< /а>


html css sass html-lists
person NiPfi    schedule 11.11.2020    source источник
comment
используйте редактор SVG, такой как Inkscape, чтобы нарисовать любой SVG, который вы хотите.   -  person Robert Longson    schedule 11.11.2020
comment
SVG не является основной проблемой, более того, его позиционирование с помощью CSS   -  person NiPfi    schedule 11.11.2020
comment
Если вы рисуете все с помощью SVG, включая текст, почему позиционирование может быть проблемой?   -  person Robert Longson    schedule 11.11.2020
comment
Ах, хорошо, если бы я нарисовал все это в SVG, это теоретически сработало бы, я думаю... Тогда проблема может заключаться в том, как интегрировать его с Angular, чтобы выделить правильную точку и сделать переводимые тексты. Редактировать: Более того, мне интересно, смогут ли вспомогательные технологии хорошо обрабатывать такие элементы, чтобы донести до пользователя то, что отображается. Это более достижимо в HTML.   -  person NiPfi    schedule 11.11.2020
comment
SVG поддерживает роли арии. После того, как вы нарисовали его, вы можете добавить значения идентификатора в текст, который хотите заменить/изменить, а также добавить значения идентификатора к точкам, чтобы их можно было выделить.   -  person Robert Longson    schedule 11.11.2020
comment
Это звучит полезно, но манипуляции с DOM на самом деле не подходят для Angular, поэтому я, вероятно, создам что-то вроде кошмара для обслуживания... Или вы знаете о хорошем способе интеграции динамического SVG в Angular?   -  person NiPfi    schedule 11.11.2020
comment
Есть много существующих вопросов и ответов по этому поводу. Никто из них не полезен?   -  person Robert Longson    schedule 11.11.2020

Ответы (1)


arrow_upward
1
arrow_downward

Возможно, вы могли бы подойти к этому по-разному, но, строго придерживаясь структуры HTML, которой вы поделились, я бы использовал CSS для создания своих кругов вместо SVG и расположил их следующим образом:

.ratings {
  display: flex;
  position: relative;
  justify-content: space-between;
  padding: 0;
}

.ratings:before {
  content: " ";
  width: calc(100% - 100px);
  height: 1px;
  background: black;
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
}

.ratings li {
  text-align: center;
  list-style: none;
  margin: 0 20px;
  position: relative;
}

.ratings li:before {
  content: " ";
  width: 20px;
  height: 20px;
  border: solid 2px black;
  border-radius: 50%;
  display: block;
  margin: 0 auto 5px;
  background: white;
}

.ratings li.active:after {
  content: " ";
  width: 16px;
  height: 16px;
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
  display: block;
  background: black;
}

Вот демонстрация для справки.

person Matt    schedule 11.11.2020
comment
Благодарю вас! Попробую сделать так, как вы предлагаете. Отмечу это как ответ, если это сработает для меня. - person NiPfi; 11.11.2020
comment
Рад, если это поможет. Дайте мне знать, если у вас возникнут какие-либо проблемы и вам понадобится дополнительная помощь. - person Matt; 11.11.2020
comment
Я смог создать рабочую статическую версию на основе этого решения. К сожалению, строка имеет тенденцию немного выходить за пределы первого и последнего элемента, если содержимое или длина контейнера настроены, но я мог бы исправить это, используя элемент, чтобы скрыть это. - person NiPfi; 11.11.2020
comment
@NiPfi Я предполагаю, что 1. Предоставление li фиксированной ширины и 2. Удаление margin из li также может помочь сделать это более надежным. Вы также можете посмотреть на width значение .ratings:before в соответствии с вашим дизайном. Это та же демонстрация после того, как я применил № 1 и № 2: jsfiddle.net/an4g6ytb - person Matt; 11.11.2020