Поддержка сайта

Высокие позиции в поисковой системе, на прямую зависят от развития вашего сайта.

Продвижение сайтов

Эффективность стратегий продвижения подтверждается сотрудничеством с крупными клиентами и отзывами о нашей работе.

Создание сайтов

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

Линейные градиенты с использованием SVG

Линейные градиенты с использованием SVG

И все-таки у нас по-прежнему остаются браузеры, в которых градиент пока еще не виден. В Opera 11.01 и более ранних — и, что важнее, в IE9 — мы можем указать в качестве фонового градиента файлы SVG.

Создав градиент в файле SVG и указав этот файл в качестве фонового изображения, мы получим точно такой же эффект, как и при использовании градиентов CSS3.

Звучит немного пугающе — «файл SVG!» — а на практике, когда речь идет о создании градиентов, все очень легко. Вот как выглядит наш градиент в формате SVG:

Линейные градиенты с использованием SVG

Линейные градиенты с использованием SVG

Все очень знакомо, не правда ли? Мы объявляем тип градиента и его вектор в элементе linearGradient; затем добавляем ключевые точки. Вектор задается начальной и конечной координатами, из xl, уі в х2, у2. Первый параметр ключевой точки — смещение (от 0 до 1), определяет ее положение на векторе (длина вектора принимается за единицу). После объявления градиента мы должны объявить прямоугольник (rect) и залить его градиентом, используя атрибут style.

Итак, мы создали небольшое изящное изображение с градиентом, но как мы сможем использовать его на нашем сайте? Сохраните файл с ра-ширением . svg. Теперь просто укажите его в качестве фона, используя тот же синтаксис, как для JPEG, GIF или PNG:

Линейные градиенты с использованием SVG

Фоновый градиент в формате SVG должен быть объявлен раньше градиентов CSS3, чтобы браузеры, понимающие и то и другое, использовали позднейшее. Многие браузеры достаточно разумны, чтобы даже не загружать SVG, если дальше он переопределен свойством background-image.

Существенное различие между градиентами CSS и SVG состоит в том, что последний не будет по умолчанию растягиваться до 100% высоты и ширины элемента, подобно тому, как это происходит с градиентами CSS. Чтобы заставить SVG заполнить контейнер, объявите высоту и ширину вашего прямоугольника SVG равными 100%.


Читайте так же:
Not found

Нам доверяют

Интернет магазин