[Перевод] Этот SVG всегда показывает сегодняшнюю дату
Для своей странички с контактными данными нужна была стандартная иконка календаря, чтобы люди просматривали мой ежедневник. Такие иконки почти всегда делают наподобие бумажного календаря. Но мне стало интересно, можно ли сделать календарь чуть полезнее, если добавить динамическую иконку.
И вот он, SVG-календарь, который всегда показывает сегодняшнюю дату:
Фоновое изображение сделано на основе иконки Twitter TweMoji Calendar — CC-BY
Поддержка текста в SVG слегка неудобная, так что позвольте объяснить, как я это сделал.
SVG поддерживает JavaScript. Это запускается сразу после загрузки изображения.
Следующий этап — получить различные строки с датами. Я использую британскую локаль en-GB, поскольку нахожусь в Великобритании.
Позиционировать текст относительно просто. Координаты X и Y привязываются к нижней границе текста — помните, что литеры с нижними выносными элементами, такие как g, выйдут за пределы координаты Y. Тут же мы устанавливаем цвет текста, размер и шрифт.
Макетирование проще всего с моноширинными шрифтами.
По поводу выравнивания. Чтобы выровнять текст по центру, укажите style="text-anchor: middle".
Предварительные тесты показали, что этот SVG работает во всех десктопных браузерах и в браузерах под Android. Мы не проводили тесты на iPhone или более экзотических устройствах.
Наслаждайтесь!
