SVG графика и ее возможности

В HTML 5 появился новый тег для отображения и рисования векторной графики. Что же это такое, и какие возможности дает разработчику?


SVG — Scalable Vector Graphics (масштабируемая векторная графика). Это язык векторной графики, в основе которого лежит XML. Разработчик теперь может прорисовывать двумерные векторные изображения, которые идеально отображаются в web за счет своей масштабируемости. При изменении масштаба графика полностью перерисовывается, поэтому мы больше не увидим растянутых пикселей или сбитых пропорций. CSS позволяет создавать анимационные эффекты.
Помимо этого, изображения имеют меньший размер и меньшую скорость загрузки, так как браузер прорисовывает его своими средствами, а не грузит со стороны.

Использование тега SVG


Все фигуры размещаются в этом теге.
Атрибуты
  • viewBox – позволяет масштабировать, фрагментировать, перемещать исходное изображение вдоль осей координат путем изменения параметров.
  • width – ширина полотна.
  • height – высота полотна.
Для рисования созданы дополнительные элементы:

line — рисует линию


Атрибуты
  • x1 — начальная x координата
  • x2 — конечная x координата
  • y1 — начальная y координата
  • y2 — конечная y координата
  • stroke-width — ширина линии
  • stroke — цвет линии
Пример
<svg>
  <line x1="10" y1="10" x2="170" y2="170" stroke-width="10" stroke="#000">
</svg>

polyline — рисует ломаную


Атрибуты
  • points — указываются координаты x,y через запятую. Множество значений разделяются пробелом.
  • fill – цвет заливки
  • stroke-width — ширина линии
  • stroke — цвет линии
Пример
<svg>
  <polyline points="10,10 50,10 150,150 10, 150 10, 10" stroke-width="5" stroke="rgb(0,0,0)"fill="rgba(100,170,10,.3)">
</svg>

rect — рисует прямоугольник


Атрибуты
  • width – ширина
  • height – высота
  • stroke-width — ширина линии
  • stroke — цвет линии
  • fill – цвет заливки
Пример
<svg>
  <rect width="300" height="100" fill="green" stroke-width="5" stroke="#000">
</svg>

circle — рисует круг


Атрибуты
  • cx – координата Х центра
  • cy – координата Y центра
  • r – радиус
  • fill – цвет заливки
Пример
<svg>
  <circle cx="100" cy="75" r="70" fill="red">
</svg>

ellipse — рисует эллипс


Атрибуты
  • cx – координата Х центра
  • cy – координата Y центра
  • rx – радиус по горизонтали
  • ry – радиус по вертикали
  • fill – цвет заливки
Пример
<svg>
  <ellipse cx="100" cy="75" rx="80" ry="40" stroke-width="4" stroke="green" fill="rgba(10,70,10, .7)">
</svg>

polygon — рисует многоугольник


Атрибуты
  • points — указываются координаты x,y через запятую. Множество значений разделяются пробелом.
  • fill – цвет заливки
  • stroke-width — ширина линии
  • stroke — цвет линии
Пример
<svg>
  <polygon points="88,56 56,136 136,88 40,88 120,136"  stroke-width="4" stroke="white" fill="blue">
</svg>

path — рисует кривые и фигурные линии


Атрибуты
  • d – предназначен для размещения команды
  • fill – цвет заливки
  • stroke-width — ширина линии
  • stroke — цвет линии
Команды
Все команды можно указать в верхнем регистре (используются абсолютные координаты) и в нижнем (относительные координаты).
  • M (x,y) – переместить указатель в точку с координатами (x,y)
  • L (x,y) – нарисовать линию от текущей точки к указанной с координатами (x,y)
  • H x+ – нарисовать горизонтальную линию от текущей точки до указанной с координатой (x)
  • V y+ – нарисовать вертикальную линию от текущей точки к указанной с координатой (y)
  • A mx,my rx,ry x-axis-rotation large-arc-flag sweep-flag x,y — рисует эллиптическую кривую из начальной точки (mx,my) в конечную(x,y). Кривая имеет два радиуса (rx,ry) и два управляющих флага.
  • C (mx,my) (x1,y1) (x2,y2) (x,y) — рисование кубической кривой Безье из начальной точки (mx,my) в конечную (x,y). Кривая имеет две контрольные точки с координатами (x1,y1) и (x2,y2). Точки перечисляются через запятую.
  • S (mx,my) (x2,y2) (x,y) — рисование кубической кривой Безье от текущей точки (mx,my) до заданной (x,y) с одной контрольной точкой (x2,y2). Точки перечисляются через запятую.
  • Q(mx,my) (x1,y1) (x,y) — отрисовка квадратичной кривой Безье от начальной точки (mx,my) до конечной (x,y) с контрольной точкой (x1,y1). Точки перечисляются через запятую.
  • T (x,y) — рисование квадратичной кривой Безье от текущей точки до заданной (x,y). Контрольная точка этой команды представляет собой отражение контрольной точки предыдущей команды.
Пример
<svg>
<path d="M 0 200 V 200 150 h 0 50 V 150 100 H 50 100 V 100 50 H 100 150 V 50 0 H 150 200 V 0 200 z  "  stroke-width="4" stroke="white" fill="blue">
</svg>

Возможности атрибута stroke


  • stroke-linecap — Свойство определяет как будут выглядеть концы линий. Возможные значения: butt, round, square. Значение по умолчанию: butt.
  • stroke-linejoin — Определяет как будут выглядеть соединения линий на углах. Возможные значения: miter (угол), round (закругление), bevel (срезанная верхушка). Значение по умолчанию: miter. Управляет видом пунктирной обводки. Можно задавать в единицах длины или в процентах. Если задано одно значение, второе значение считается равным первому. Например, stroke-dasharray=«1» нарисует линию из отрезков длиной одну единицу разделенных пробелами такой же ширины.
  • stroke-dashoffset — Свойство позволяет задать смещение пунктирной обводки относительно первоначального положения. Значение задается в единицах длины или в процентах, значения могут быть отрицательными. Значение по умолчанию: 0.
  • stroke-opacity — Прозрачность обводки. Задаются значения от 0.0 до 1.0.
Полный курс по SVG графике находится здесь.

Добавление эффектов


Создадим три блока и добавим к ним анимированные эффекты при наведении. Только сделаем это с помощью SVG графики, а не средствами редактора PIXLI.

На рисунке обводка второго блока показана в движении.
Добавим в область два фрагмента HTML-кода. В первом поместим разметку блоков.
<div class="basicBox">
  Hover
  <svg width="130" height="65" viewBox="0 0 130 65"> 
  <rect x='0' y='0' fill='none' width='130' height='65'/>
  </svg>
</div>
<div class="swiggleBox">
  Hover
  <svg width="130" height="65" viewBox="0 0 130 65">
  <path d="M0.6,0.5c0,5.4,0,61.5,0,61.5s4.5,5.4,9.9,0c5.4-5.4,9.9,0,9.9,0s4.5,5.4,9.9,0c5.4-5.4,9.9,0,9.9,0
	s4.5,5.4,9.9,0c5.4-5.4,9.9,0,9.9,0s4.5,5.4,9.9,0c5.4-5.4,9.9,0,9.9,0s4.5,5.4,9.9,0c5.4-5.4,9.9,0,9.9,0s4.5,5.4,9.9,0
	c5.4-5.4,9.9,0,9.9,0s4.5,5.4,9.9,0c0,0,0-56.1,0-61.5H0.6z"/>
  </svg>
</div>
<div class="checkBox">
  Hover
  <svg width="140" height="65" viewBox="0 0 140 65" >
    <rect x="10" class="button" width="128.8" height="63.9"/>
    <rect x="0" y="22.5" class="box" width="20" height="20"/>
    <polyline class="checkMark" points="4.5,32.6 8.7,36.8 16.5,29.1"/>
  </svg>
</div>
Эффект будет основан на изменении прозрачности части рамки.
Во втором блоке кода разместим стиль.
1. Cтиль блоков кнопок. Изменяя эти параметры, кнопки можно увеличить, изменить цвет текста и пр.
.basicBox, .swiggleBox, .checkBox {
  width: 130px;
  height: 65px;
  margin: 15px auto;
  color: #4274D3;
  font-family: 'Open Sans', sans-serif;
  font-size: 1.15rem;
  line-height: 65px;
  text-transform: uppercase;
  text-align: center;
  position: relative;
  cursor: pointer;
}
2. Стиль SVG поля.
svg {
  position: absolute;
  top: 0;
  left: 0;
}
3. Заливка и линии. Можно добавить заливку фигуры, изменить цвет обводки.
svg rect, svg path, svg polyline {
  fill: none;
  stroke: #FF4500;
  stroke-width: 3;
}
4. Цвет линии при наведении. Вы можете изменить цвет анимированной линии при наведении.
.basicBox:hover svg rect, .swiggleBox:hover svg path, .checkBox:hover svg polyline {
  stroke: #000000;
}
5. Настройка перехода Basic Box
svg rect {
  stroke-dasharray: 400, 0;
  -webkit-transition: all 0.8s ease-in-out;
  -moz-transition: all 0.8s ease-in-out;
  -ms-transition: all 0.8s ease-in-out;
  -o-transition: all 0.8s ease-in-out;
}
.basicBox:hover svg rect {
  stroke-width: 5;
  stroke-dasharray: 35, 245;
  stroke-dashoffset: 38;
  -webkit-transition: all 0.8s ease-in-out;
  -moz-transition: all 0.8s ease-in-out;
  -ms-transition: all 0.8s ease-in-out;
  -o-transition: all 0.8s ease-in-out;
}
6. Настройка перехода Swiggle Box
svg path {
  stroke-dasharray: 265, 0;
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -ms-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
}
.swiggleBox:hover svg path {
  stroke-width: 3;
  stroke-dasharray: 0, 350;
  stroke-dashoffset: 20;
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -ms-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
}
7. Стили Check Box (смещение и переход соответственно)
.checkBox svg {
  margin-left: -10px;
}
.checkBox svg rect, .checkBox svg polyline {
  fill: none;
  stroke: #4274D3;
  stroke-width: 1;
  -webkit-transition: all 0.8s ease-in-out;
  -moz-transition: all 0.8s ease-in-out;
  -ms-transition: all 0.8s ease-in-out;
  -o-transition: all 0.8s ease-in-out;
}
.checkBox:hover svg rect {
  stroke-width: 2;
  -webkit-transition: all 0.8s ease-in-out;
  -moz-transition: all 0.8s ease-in-out;
  -ms-transition: all 0.8s ease-in-out;
  -o-transition: all 0.8s ease-in-out;
}
.checkBox:hover svg polyline {
  stroke-width: 2;
  -webkit-transition: all 0.8s ease-in-out;
  -moz-transition: all 0.8s ease-in-out;
  -ms-transition: all 0.8s ease-in-out;
  -o-transition: all 0.8s ease-in-out;
}
.checkBox svg .button {
  stroke-dasharray: 400px, 0;
}
.checkBox:hover svg .button {
  stroke-dasharray: 0, 400px;
  stroke-dashoffset: 33px;
}
.box, .checkMark {
  opacity: 0;
}
8. Анимация CheckBox
.checkBox:hover .box {
  -webkit-animation: boxDisplay 0.2s forwards;
  -moz-animation: boxDisplay 0.2s forwards;
  -ms-animation: boxDisplay 0.2s forwards;
  -o-animation: boxDisplay 0.2s forwards;
  animation: boxDisplay 0.2s forwards;
  -webkit-animation-delay: 0.65s;
  -moz-animation-delay: 0.65s;
  -ms-animation-delay: 0.65s;
  -o-animation-delay: 0.65s;
  animation-delay: 0.65s;
}
.checkBox:hover .checkMark {
  -webkit-animation: checkDisplay 0.2s forwards;
  -moz-animation: checkDisplay 0.2s forwards;
  -ms-animation: checkDisplay 0.2s forwards;
  -o-animation: checkDisplay 0.2s forwards;
  animation: checkDisplay 0.2s forwards;
  -webkit-animation-delay: 1s;
  -moz-animation-delay: 1s;
  -ms-animation-delay: 1s;
  -o-animation-delay: 1s;
  animation-delay: 1s;
}
9. Анимация прорисовки рамки чекбокса
@-webkit-keyframes boxDisplay {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@-moz-keyframes boxDisplay {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@-ms-keyframes boxDisplay {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@-o-keyframes boxDisplay {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes boxDisplay {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
10. Анимация прорисовки галочки чекбокса
@-webkit-keyframes checkDisplay {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@-moz-keyframes checkDisplay {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@-ms-keyframes checkDisplay {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@-o-keyframes checkDisplay {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes checkDisplay {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
В итоге у нас получаются интересные эффекты при наведении мыши на кнопку.
13 may 2017, 09:16    Ivan Web-дизайн 0    3 0

Comments (0)

    You need to login to create comments.