Блог

Главная - Вопросы по программированию - Вычислите пунктирный путь выполнения в круге SVG

Вычислите пунктирный путь выполнения в круге SVG

#css #svg

Вопрос:

Я создаю круг прогресса, который представляет уровень пользователей до трех. Он содержит три тире по периметру. Более темная линия, перекрывающая каждую черточку, будет отражать прогресс пользователя. Если пользователь первого уровня, первая черта должна перекрываться суммой, равной (их текущий опыт / общий опыт перехода на следующий уровень). Если пользователь второго уровня, первая черточка должна полностью перекрываться, а вторая черточка должна быть такой же, как выше, и так далее. Я построил свой SVG-круг со следующим кодом:

 <svg
   width="240"
   height="240"
   viewBox="0 0 240 240"
   strokeWidth="2px"
   strokeDasharray="220 10"
   strokeDashoffset="50"
>
    <circle cx="120" cy="120" r="110" fill="white" stroke="turquoise" />
</svg>

Это изображение представляет пользователя, который находится на втором уровне и примерно на полпути к третьему уровню.

Как я мог бы рассчитать a <path> , чтобы перекрыть круг и отобразить прогресс пользователя?

Комментарии:

1. Я занимался этим здесь, что требует четырех элементов и некоторого JS: jsfiddle.net/76ho3bgr

2. Поскольку вы не предлагали использовать какие-либо JS, я не буду публиковать ответ. Но я немного поиграл, если это представляет какой — либо интерес-если вы измените переменную status вверху между 0 и 3, она впоследствии анимирует смещения пути до этого уровня с постоянной скоростью: codepen.io/Shikkediel/pen/bGRwawv

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

4. Ладно, решил это… Раньше не замечал. Казалось очень странным, но было вызвано наложением элементов fill: white mutliple.

5. @Shikkediel Теперь выглядит идеально! Огромное спасибо вам за вашу помощь и интерес к этой маленькой проблеме.

Ответ №1:

Вот как вы бы сделали это с дуговым путем. Нарисуйте дугу от нижней части окружности до 1 единицы по оси x. Установите длину пути=»100″, чтобы вы могли соответствующим образом рассчитать необходимый массив тире. Затем убедитесь, что ваш массив тире составляет 100.

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

 <svg
   width="240px"
   height="240px"
   viewBox="0 0 240 240"
   stroke-width="4"
   stroke-dasharray="220 10"
   stroke-dashoffset="50"
   stroke-linecap ="none">
  
    <circle cx="120" cy="120" r="110" fill="white" stroke="turquoise" />
    <path pathLength="100" d="M120 230 a 110 110 0 1 1 1 0" stroke="red" fill="none" stroke-width="8" stroke-dasharray="0 1 32 1 15 50" stroke-dashoffset="0"/>
</svg>

Ответ №2:

Я сомневаюсь в удобочитаемости вашего дизайна:

Этот дизайн основан на графиках Google Analytics:

 <script src="https://progress-circle.github.io/element.js"></script>

    <progress-circle edge="grey">
      <style>
        svg {
          font: 16px arial;
          height: 180px;
        }
      </style>
      <progress value="75%" stroke="green">Level I</progress>
      <progress value="60%" stroke="orange">Level II</progress>
      <progress value="50%" stroke="orangered">Level III</progress>
    </progress-circle>

Ответ №3:

Здесь вы можете управлять длиной каждого пути, установив значение stroke-dasharray . Первое число-это длина (от 0 до 94 (2*PI*45/3 = 94)), а второе число-это расстояние между штрихами (это должно быть просто больше 284).

В этом примере длина красного пути составляет 50%. Вам нужно немного поэкспериментировать с цифрами.

 var dist = 6;
console.log('Length of 1/3 circle:', Math.round(2 * Math.PI * 45 / 3)-dist);
console.log('Rotate <g> slightly:',-Math.round(2 * Math.PI * 45 / 12)-(dist/2)); 
 <div id="progress">
  <svg viewBox="0 0 100 100" width="300" height="300">
      <g transform="translate(50 50) rotate(-27)">
         <path transform="rotate(0)" d="M 45,0 A 45,45 0 0 1 0,45 45,45 0 0 1 -45,0 45,45 0 0 1 0,-45 45,45 0 0 1 45,0 Z" stroke-width="5" stroke-dasharray="44 400" stroke-dashoffset="0" stroke="red" fill="none" stroke-linecap="round"/>
         <path transform="rotate(120)" d="M 45,0 A 45,45 0 0 1 0,45 45,45 0 0 1 -45,0 45,45 0 0 1 0,-45 45,45 0 0 1 45,0 Z" stroke-width="5" stroke-dasharray="88 400" stroke-dashoffset="0" stroke="navy" fill="none" stroke-linecap="round"/>
         <path transform="rotate(240)" d="M 45,0 A 45,45 0 0 1 0,45 45,45 0 0 1 -45,0 45,45 0 0 1 0,-45 45,45 0 0 1 45,0 Z" stroke-width="5" stroke-dasharray="88 400" stroke-dashoffset="0" stroke="orange" fill="none" stroke-linecap="round"/>
      </g>
   </svg>
</div>
Метки: