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

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

enter image description here

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

Вот то, к чему я пришел до сих пор, это не имеет смысла, но это единственный способ, который я нашел, чтобы сделать 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
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

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