Строка выполнения SVG, пунктирная по шкале 75 кругов

Я застрял в проблеме уже 2 дня. Я постараюсь кратко рассказать об этом, но результат должен выглядеть следующим образом:

Строка выполнения SVG, пунктирная по шкале 75 кругов

В настоящее время я не знаю, как это сделать, я попытаюсь начать с жестко запрограммированного значения, а затем попытаюсь сопоставить процент круга с реальным значением. (Не обращайте внимания на круг посередине, я сделаю это позже)

Вот то, к чему я пришел до сих пор, это не имеет смысла, но это единственный способ, который я нашел, чтобы сделать 75% круга:

svg {
  margin: 15px;
}

.loader {
    stroke: red;
    stroke-width: 6;
    stroke-dasharray: 258;
    transform-origin: center;
    transform: rotate(135deg);
    fill: transparent;
}
.loader.grey {
    stroke: #c1c1c1;
}
<svg class = "loader-svg" width = "110" height = "110" viewBox = "0 0 130 130">
  <circle
    class = "loader grey"
    cx = "65"
    cy = "65"
    r = "55"
  ></circle>
</svg>

Обновлено: мне также нужно иметь точные 10 тире, и мне не нужно его анимировать

Я не совсем уверен, в чем ваш вопрос, но если вы спрашиваете, как окрасить часть вашего круга в другой цвет, самый простой способ сделать это - сделать копию круга, отрегулировать ширину, поместить ее на верхней части первого круга и измените цвет для этого.

Sirence 10.08.2018 15:55

анимация предназначена для иллюстрации, в ней нет необходимости;) просто удалите ее .. и вы можете получить 10 или 20 или любое количество штрихов, просто изменив значения. Я просто дал общий ответ

Temani Afif 10.08.2018 16:04

Я посмотрю на твой и попробую отредактировать :)

nook 10.08.2018 16:06
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
0
3
835
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете попробовать это:

svg {
  margin: 15px;
}

.loader {
    stroke: red;
    stroke-width: 6;
    stroke-dasharray: 262,350; /*75%*/
    transform-origin: center;
    transform: rotate(135deg);
    fill: transparent;
    animation:change 5s linear infinite alternate;
}
.loader.grey {
    stroke: #c1c1c1;
}

@keyframes change {
  from{stroke-dasharray: 0,350;} /*0%*/
  to{stroke-dasharray: 350,350;} /*100%*/
}
<svg class = "loader-svg" width = "110" height = "110" viewBox = "0 0 130 130">
  <circle
    class = "loader grey"
    cx = "65"
    cy = "65"
    r = "55"
  ></circle>
</svg>

Для тире просто добавьте еще один кружок вверху:

svg {
  margin: 15px;
}

.loader {
    stroke: red;
    stroke-width: 6;
    stroke-dasharray: 262,350; /*75%*/
    transform-origin: center;
    transform: rotate(135deg);
    fill: transparent;
    animation:change 5s linear infinite alternate;
}
.loader.grey {
    stroke: #c1c1c1;
}
.dash {
 stroke: #fff;
    stroke-width: 6;
    stroke-dasharray: 17; /*adjust this to control the dashes*/ 
    transform-origin: center;
    transform: rotate(135deg);
    fill: transparent;
}

@keyframes change {
  from{stroke-dasharray: 0,350;} /*0%*/
  to{stroke-dasharray: 350,350;} /*100%*/
}
<svg class = "loader-svg" width = "110" height = "110" viewBox = "0 0 130 130">
  <circle
    class = "loader grey"
    cx = "65"
    cy = "65"
    r = "55"
  ></circle>
  <circle
    class = "dash"
    cx = "65"
    cy = "65"
    r = "55"
  ></circle>
</svg>

Я обнаружил, что моя проблема не в том, что я думал, но это все еще хороший ответ, и я буду использовать его не для тире, а для зеленого уровня у меня будет фоновый серый круг, на z-index 2 я буду есть мой зеленый уровень, а на z-index 3 белые пути, которые будут действовать, как если бы серый кружок был заштрихован.

nook 10.08.2018 18:36

Другие вопросы по теме