Создание гибких, поддерживаемых круговых диаграмм с помощью CSS и SVG

Sat, 08 Aug 2015 20:49:49 +0400

Это перевод статьи Леи Вероу Designing Flexible, Maintainable Pie Charts With CSS and SVG

Когда дело доходит до CSS-приёмов, нет никого более упёртого и умного в поиске решений любой проблемы чем Леа Вероу. Не так давно, Леа написала, отредактировала и опубликовала Секреты CSS, реально фантастическую книгу об маленьких CSS-хитростях и приёмах для решения повседневных задач. Если вы думали, что знаете CSS достаточно хорошо, подумайте еще раз: вы будете удивлены. В этой статье, мы покажем немного крутых вещей из книги, которые были представлены также в недавнем выступлении Леи на СмешингКонф Нью-Йорк — о создании простых круговых диаграмм с помощью CSS. Пожалуйста, учтите, что некоторые демки могут не работать так, как ожидалось из-за ограниченной поддержки в браузерах. — прим. ред.

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

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

Решение, основанное на трансформациях

Это лучшее решение в плане разметки: нам нужен только один элемент, всё остальное будет сделано с помощью псевдо-элементов, трансформаций и CSS-градиентов. Начнём с добавления элемента:

В этом месте, давайте предположим, что нам нужна круговая диаграмма, которая захардкожена под отображение 20%. Мы разберём, как сделать это более гибко позднее. Давайте стилезуем элемент под круг, который будет нашим фоном.

Фигура 1: Наша точка отсчёта (или диаграмма, отображающая 0%)

.pie {
	width: 100px; height: 100px;
	border-radius: 50%;
	background: yellowgreen;
}

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

Чтобы раскрасить половину нашего круга коричневым, мы используем простой градиент:

background-image:
  linear-gradient(to right, transparent 50%, #655 0);

Фигура 2: Правая часть нашего круга стала коричневой, с помощью простого градиента

Как вы можете видеть, на фигуре 2 есть всё, что нам нужно. Теперь мы можем приступить к стилезации псевдо-элемента, который будет выступать в качестве маски.

.pie::before {
	content: '';
	display: block;
	margin-left: 50%;
	height: 100%;
}

Фигура 3: Псевдо-элемент, который будет действовать как маска, показан пунктирными линиями

На Фигуре 3 вы можете видеть, где наш псевдо-элемент находится, по отношению к диаграмме. Сейчас он не стилизован, и нечего не перекрывает. Это всего лишь невидимый прямоугольник. Перед стилизацией уясним несколько моментов:

Так как мы хотим перекрыть коричневую часть нашего круга, нам нужно применить зелёный фон к псевдо-элементу, используя

background-color: inherit

Быстрый способ получить svg из векторного слоя в фотошопе

Tue, 04 Nov 2014 02:23:17 +0400

Данный способ работает только в Photoshop CC.

Первым делом создаём в домашней папке пользователя файл generator.json, со следующим содержимым:

{
  "generator-assets":  { 
    "svg-enabled": true
  }
}

Файл можно скачать (generator.json), для ускорения процесса.

Ставим галку в меню File → Generate → Image Assets.

Затем переименовываем нужный слой, даём ему любое имя, заканчивающиеся на .svg (например pic.svg).

И вуаля. Рядом с psd файлом получаем папку, в которой будет лежать готовый svg.

Можно переименовывать даже группу слоёв.

Фотошоп довольно умно сгенерирует единый svg файл, учитывая все эффекты слоёв.

Техноблог, заметки с тегом: svg

Создание гибких, поддерживаемых круговых диаграмм с помощью CSS и SVG

Решение, основанное на трансформациях

Быстрый способ получить svg из векторного слоя в фотошопе