На нашем сайте мы используем cookie для сбора информации технического характера и обрабатываем IP-адрес вашего местоположения. Продолжая использовать этот сайт, вы даете согласие на использование файлов cookies. Здесь вы можете узнать, как мы пользуемся файлами cookies.
Я согласен
логотип upread.ru

Рисуем SVG самостоятельно



Создавать всяческие фигуры с помощью SVG несложно, даже просто. В этой заметке мы как раз и научимся рисовать самостоятельно, используя только теги, CSS и немного смекалки. Итак, предположим, что нам необходимо нарисовать вот такую фигуру:



Между нами говоря, выглядит довольно мрачно, очень похоже на гроб, но нам то какая разница? Надо – значит надо! Начнем с того, какие теги (фигуры) можно использовать:

  • circle
  • ellipse
  • line
  • polyline
  • path
  • rect
  • polygon
Если у вас есть хотя бы небольшие знания английского языка, то догадаться, что есть что совсем просто. Нам больше всего подходит тег polygon. Задаем его и сразу же атрибуты:

<polygon points="120,50 995,80 975,290 65,310 50,90" style="fill:#000; filter: url(#svg-shadow);"></polygon>
Атрибут points – это координаты 5-ти точек. В стиле указываем заливку черным и откуда берем фильтр (как бы свечение по краям). Для фильтра пишем такой код:

<filter id="svg-shadow" filterUnits="userSpaceOnUse" x="0" y="0">
<feGaussianBlur in="SourceAlpha" stdDeviation="20" result="blur"></feGaussianBlur>
<feOffset in="blur" dx="3" dy="3" result="offsetBlr"></feOffset>
<feFlood flood-color="rgba(0,0,0,.75)"></feFlood>
<feComposite operator="in" in2="offsetBlr" result="colBlur"></feComposite>
<feMerge>
<feMergeNode in="colBlur"></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
Все это не забываем обернуть в svg и на выходе получаем такой код:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1045 360" preserveAspectRatio="none">
<polygon points="120,50 995,80 975,290 65,310 50,90" style="fill:#000; filter: url(#svg-shadow);"></polygon>
<filter id="svg-shadow" filterUnits="userSpaceOnUse" x="0" y="0">
<feGaussianBlur in="SourceAlpha" stdDeviation="20" result="blur"></feGaussianBlur>
<feOffset in="blur" dx="3" dy="3" result="offsetBlr"></feOffset>
<feFlood flood-color="rgba(0,0,0,.75)"></feFlood>
<feComposite operator="in" in2="offsetBlr" result="colBlur"></feComposite>
<feMerge>
<feMergeNode in="colBlur"></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
</svg>
Вот и все! В чем же преимущества svg? Во-первых, он легко редактируется руками. Во-вторых, с содержимым можно работать, например, с помощью JavaScript. В-третьих, чаще всего, картинка в таком формате весит меньше. Ну и некоторые другие мелкие, но приятные мелочи. Стоит только предусмотреть возможность открытия картинок старыми браузерам.


Автор этого материала - я - Пахолков Юрий. Я оказываю услуги по написанию программ на языках Java, C++, C# (а также консультирую по ним) и созданию сайтов. Работаю с сайтами на CMS OpenCart, WordPress, ModX и самописными. Кроме этого, работаю напрямую с JavaScript, PHP, CSS, HTML - то есть могу доработать ваш сайт или помочь с веб-программированием. Пишите сюда.



тегизаметки, svg, css





Отправляя сообщение я подтверждаю, что ознакомлен и согласен с политикой конфиденциальности данного сайта.




Мотивирующие книги
Урок 8. Создание параллельных задач C#


© upread.ru 2013-2022
При перепечатке активная ссылка на сайт обязательна.
Задать вопрос
письмо
Здравствуйте! Вы можете задать мне любой вопрос. Если не получается отправить сообщение через эту форму, то пишите на почу up777up@yandex.ru
Отправляя сообщение я подтверждаю, что ознакомлен и согласен с политикой конфиденциальности данного сайта.