Индикатор прохождения задания — это картинка в СВГ, которая анимируется с помощью Яваскрипта. Прелесть СВГ для этой задачи в том, что можно встроить изображение прямо в тело страницы и управлять им через ЦСС.
СВГ хоть и похож на ХТМЛ, но им не является. СВГ — это подмножество языка разметки Икс‑эм‑эль, который задуман как язык, одновременно понятный людям и программам. Поэтому СВГ более строгий: если не закрыть тег, картинка «взорвётся» ошибкой
СВГ — это текстовый формат, похожий на ХТМЛ. Если открыть картинку в СВГ, мы увидим теги и атрибуты:
<svg viewBox="0 0 200 200">
<circle cx="0" cy="20" r="70" fill="#D1495B" />
<circle cx="0" r="12" stroke="#F79257" stroke-width="2" />
</svg>СВГ хоть и похож на ХТМЛ, но им не является. СВГ — это подмножество языка разметки Икс‑эм‑эль, который задуман как язык, одновременно понятный людям и программам. Поэтому СВГ более строгий: если не закрыть тег, картинка «взорвётся» ошибкой
Чтобы собрать индикатор прохождения задания, нам понадобятся два элемента: круг и закрашенный в нём сектор. Нарисуем сначала круг:
<!-- viewbox определяем минимальные и начальные размеры холста. В нашем случае минимальные размеры равны нуля, а начальные — 16×16 пк -->
<svg viewBox="0 0 16 16">
<!-- Рисуем круг радиусом в 7 пк от центра изображения. fill зальёт его ключевым цветом, который мы зададим в ЦСС. А stroke добавит обводку -->
<circle r="7" cx="8" cy="8"
fill="var(--keyColor)"
stroke="var(--keyColor)" stroke-width="2" />
</svg>Чтобы закрасить сектор круга, нужен путь, который опишет сектор, и соответствующая заливка. Для этого в СВГ используют тег path, описывающий команды воображаемому перу:
<svg viewBox="0 0 16 16">
<circle r="7" cx="8" cy="8" fill="var(--keyColor)" stroke="var(--keyColor)" stroke-width="2" />
<path d="M 8 8 L 8 1 A 7 7 0 1 0 15 8 L 8 8 Z" fill="var(--fillColor)" />
</svg>Разберём команды path:
M 8 8
Move to переместит перо, начало пути, в точку (8, 8) — центр нарисованного круга
L 8 1
Line to нарисует линию от текущей точки до точки (8, 1) на двенадцать часов
A 7 7 0 1 0 15 8
Arc curve нарисует эллиптическую дугообразную кривую с радиусами 7, 7 и углом в 0°. 1 указывает на то, что нужна бо́льшая дуга, а 0 — на движение против часовой стрелки. Перо при этом должно остановиться в точке (15, 8) на три часа
L 8 8
нарисует прямую линию до точки (8, 8) — центра круга
Z
замкнёт кривую, соединив текущую точку с начальной
В следующем совете расскажу, как динамизировать и анимировать индикатор прогресса, и причём тут полярные координаты.
P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.