Как поменять цвет свг css
Перейти к содержимому

Как поменять цвет свг css

  • автор:

Как мы используем SVG-спрайты(новый способ)

При верстке макета из PSD часто иконки вставлены в формате SVG, а если нет — просим их у дизайнера. Ранее мы использовали иконочные шрифты, но недавно увидели преимущества спрайтов и решили попробовать с ними поиграться внедрить их в процесс разработки. Нам нравятся иконочные шрифты, но они имеют ряд недостатков(на эту тему почитайте CSSTricks). Эксперимент удался, и вот как мы организовали систему.

Условия

Что нам нужно от спрайтов:

  1. Гибкое управление размером, цветом и поведением(hover, focus etc) иконки
  2. Автоматизация, минимум ручной работы
  3. Подгрузка на страницу только необходимых иконок
  4. Удобная вставка иконок в разметку страницы (для шаблонизации html я использую jade)

Результат:

Кроссбраузерность

Мы подключаем иконку ссылаясь на внешний svg-файл, к сожалению не все браузеры поддерживают такой запрос. Для решения этой проблемы есть библиотека svg4everybody. Подключаем её и инициализируем:

$(document).ready(function ()  svg4everybody(<>); >);

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

Некорректные иконки

К сожалению, не все дизайнеры делают иконки по пиксельной сетке. В этом случае иконки будут “размываться”. Если вы экспортируете иконки из иллюстратора вам нужно включить пиксельную сетку и подогнать размер и расположение иконки под пиксельную сетку. Если вы работаете в готовыми svg-файлами — воспользуйтесь сервисом iconmoon для их правильного выравнивания. Также важно конвертировать stroke для иконок, о том как это сделать написано в документации iconmoon.

SVG-маски

SVG-маски — это очень богатая тема. В SVG есть два способа обрезать один элемент с помощью другого: это clip-path и mask. Clip-path для обрезки использует только контуры фигур, игнорируя заливки и обводки, с масками всё гораздо интереснее: в них учитываются и заливки, и обводки, и яркость содержимого. Более того, в маску можно вставить растровое изображение, и тогда для создания маски будут использоваться его темные и светлые участки.

Код самой простой маски выглядит вот так:

mask id="mask"> mask>

Добавим пару фигур для примера:

mask id="mask"> g stroke="gray" stroke-width="12" fill="white"> circle cx="33%" cy="30%" r="20%" /> circle cx="52%" cy="62%" r="32%" /> g> mask>

Картинка + маска = результат:

Код маски задаётся внутри SVG и может быть использован как внутри этого элемента, так и в других SVG-элементах на той же странице. Также есть возможность использовать SVG-маски в CSS (например, mask: url(#mymask) ), но на данный момент это работает только в Firefox.

Единственным обязательными атрибутом элемента mask является id — это идентификатор, который нужен для подключения маски к элементу, но есть и другие атрибуты:

maskUnits

Определяет, какая система координат будет использоваться для атрибутов x , y , width и height , то есть для внешних размеров и координат.

userSpaceOnUse — используется текущая система координат элемента, к которому применяется маска. Если не применялись трансформации, соответствует системе координат всего документа (например, width: 100% будет равно ширине всего SVG-элемента).

objectBoundingBox — атрибуты x , y ,

width и height задаются в частях или процентах от размеров элемента, к которому применяется маска ( width: 100% будет равно ширине элемента с маской).

Если maskUnits не задано, используется значение objectBoundingBox .

Попереключайте значения maskUnits и посмотрите как меняется поведение маски:

С objectBoundingBox 50% рассчитываются относительно элемента, с userSpaceOnUse — относительно всего документа.

С objectBoundingBox координаты и размеры можно задавать и в частях от целого, и в процентах, то есть .5 здесь то же самое, что и 50% . При userSpaceOnUse будут работать только процентные значения либо значения в абсолютных единицах, например, в пикселях.

maskContentUnits

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

userSpaceOnUse — для содержимого маски используется текущая система координат элемента, к которому применяется маска (без трансформаций соответствует системе координат всего SVG-элемента).

objectBoundingBox — для содержимого маски используется система координат относительно элемента, все размеры и расстояния рассчитываются исходя из размеров элемента с маской.

Если атрибут maskContentUnits не задан, используется значение userSpaceOnUse .

Обратите внимание, что при objectBoundingBox фигуры могут искажаться (в данном случае круг превращается в эллипс).

В отличие от maskUnits , при objectBoundingBox координаты и размеры можно задавать только в частях от целого (возможные значения — от 0 до 1), значения в процентах работать не будут.

То есть не то чтобы совсем не будут — процентные значения будут рассчитываться относительно размеров всего SVG, и в этом случае .5 совсем не равно 50% , потому что .5 — это половина элемента с маской, а 50% — это уже половина всего SVG-изображения. И если вы будете менять значения maskContentUnits , вам придётся каждый раз переписывать размеры и координаты содержимого маски.

Мне не сразу удалось понять как это работает, спасибо SelenIT2 и AmeliasBrain за то, что помогли разобраться в вопросе.

X и Y

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

Для x и y значение по умолчанию 10% .

Width и height

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

Для width и height значение по умолчанию 120% .

Вместе параметры x , y , width и height работают как viewBox , то есть определяют размеры отображаемой области маски:

Знание всех этих технических подробностей позволит не сойти с ума при работе с масками и их своеобразными системами координат.

Примеры использования

Маски можно (и нужно) использовать для создания визуальных эффектов. Правда, мне пока не приходилось использовать маски в реальных проектах, но экспериментировать с ними очень увлекательно. Внимание: лучше всего демо отображаются в Opera и Chrome. В Firefox могут не работать некоторые анимации, в Safari воообще беда.

Например, с помощью маски можно вырезать фигуру нужной формы, анимировать её содержимое и собрать калейдоскоп.

Или привязать фигуру внутри маски к координатам курсора и получить фонарик (наведите курсор на демо):

Ещё интереснее заворачивать в маску растровые изображения (в отличие от векторных, они могут быть любой сложности, с множеством деталей и мелких штрихов):

Подобное можно сделать с любой чёрно-белой картинкой, и для этого даже не придется открывать графический редактор.

Изображение в маске может быть анимированным (и заливка для него тоже!):

(Если птица показалась вам знакомой, вам не показалось.)

Также с помощью маски можно сделать анимированную заливку для текста:

А ещё можно динамически менять векторное содержимое маски и сделать исчезающие надписи или, например, часы:

Или эффектную фотогалерею (туториал):

Маски удивительные, играться с ними можно до бесконечности. И, по-моему, они несут в себе огромный потенциал, который мы только-только начинаем открывать.

Показать комментарии

Сайдбар

Статьи

  • Математические функции в CSS
  • Адаптивное видео с помощью встроенных математических функций CSS
  • Недоступность в картинках
  • Единицы размеров в CSS
  • Генератор цветовых тем
  • Jekyll → Gatsby
  • Вариативные шрифты
  • Размеры в SVG
  • Адаптивный Pixel Perfect
  • Логотип не отвечает или временно недоступен
  • SVG-паттерны
  • Мыльные пузыри на SVG
  • SVG-градиенты
  • Весёлая консолька
  • SVG-маски
  • Умная прокрутка со Scroll Snap Points
  • CSS-анимации для ротации изображений
  • Анимированные SVG-маски
  • Странности обводки в SVG
  • SVG-прелоадеры
  • Анимируем градиенты ещё раз
  • Background-blend-mode
  • Возможности оформления SVG
  • CSS и SVG маски
  • Nth-child и nth-of-type
  • SVG-иконки
  • SVG: заливка и обводка
  • SVG-path
  • SVG: группировка и переиспользование элементов
  • SVG-фигуры и трансформации
  • SVG
  • СSS-градиенты и 3D
  • Рисовалка анимированных теней
  • Свежие CSS-паттерны
  • CSS-паттерны
  • Радиальные градиенты
  • Линейные градиенты
  • Крестики-нолики на CSS
  • Border-image
  • Электронные часы на CSS и JS.
  • Сколько весят селекторы?
  • Символы юникода
  • Свойство content
  • Анимируем CSS-градиенты
  • Текстовые эффекты
  • Древовидный список на CSS
  • Css-селекторы, часть 2
  • Css-селекторы
  • Контекст наложения
  • Два способа «прошить» элемент по краю
  • Box-sizing
  • Цвета в CSS
  • Фон под строчками: добавляем поля
  • Box-shadow
  • Css-фигуры: лепесток
  • Transform
  • Css Animation
  • 3D-куб
  • Border-radius
  • First letter
  • Эти глаза напротив
  • CSS-фигуры
  • Стрелки с помощью свойства border
  • Flexbox

Страницы

  • SVG: полезные ссылки
  • CSS-селекторы одной таблицей
  • Таблица именованных цветов
  • Функции Transform
  • Свойства Transform
  • Свойства Animation одной таблицей
  • Разный синтаксис Flexbox
  • Свойства Flexbox одной таблицей

Проекты

Линейные градиенты

Градиенты в CSS и SVG очень похожи. Основная разница в том, что SVG представляет градиент в виде разметки. Это делает градиенты в SVG более удобными для чтения и понимания. Линейный градиент (градиент, который меняет свой цвет по прямой линии) можно создать с помощью тега linearGradient, внутри которого указываются опорные точки:

Созданному градиенту нужно присвоить идентификатор, на который можно сослаться. Нарисуем градиентный прямоугольник. Градиент обычно помещают в секцию defs:

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

Опорные точки stop являются ограничителями градиента. Атрибут offset указывает на позицию смещения и записывается от 0 до 1 или от 0% до 100%, указывая на точку выхода цветов.

Цвета градиентов можно задавать через любую систему цветов в CSS.

Можно задать цвет через CSS. Такой подход являются более гибким в некоторых случаях.

 rect < fill: url(#rect_gradient); > 

Мы привыкли, что градиент – это плавный переход от одного цвета к другому. Но если опорные точки пододвинуть друг к другу достаточно близко, то можно создать четкий переход:

У элемента stop есть также дополнительный атрибут stop-opacity для задания уровня прозрачности.

Меняем направление градиента

По умолчанию градиенты идут слева направо. В SVG градиент задаёт точки x1, y1, x2, и y2 для постановки направления линейного градиента. Обратите внимание, что не всем атрибутам нужны значения для создания градиента, так как по умолчанию они уже имеют значение 0 кроме точки x2, которая по умолчанию имеет значение 100%. Так мы получаем линейный SVG градиент с направлением слева направо. Чтобы создать диагональный градиент, необходимо точке y2 задать 100%, т.е. мы указываем нижнюю правую точку прямоугольника. Помните, что у нас не будет градиента с наклоном в 45°, так как значения относительны размерам элемента и не имеют абсолютного позиционирования.

SVG на данный момент поддерживает только линейные и радиальные градиенты. Конусные градиенты (градиенты по дуге) были предложены для внесения в CSS, а сетчатые (градиенты в двумерных сетках с цветами, выходящими из каждой точки) запланированы в SVG2.

Как поменять цвет свг css

У вас еще нет коллекций

Здесь представлены все коллекции

Что я могу делать со своими коллекциями?

  • Добавить иконки

Нажмите на любую иконку, которую хотите добавить в коллекцию.

Организуйте свои коллекции по проектам. Добавляйте, удаляйте, редактируйте и переименовывайте иконки.

Воспользуйтесь функцией «Коллекция красок» и измените цвет всей коллекции или сделайте это постепенно, изменяя иконку за иконкой

Загрузите свои коллекции в формате кода, совместимом со всеми браузерами, и используйте иконки на своем веб-сайте.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *