jQuery | Плагин DrawSVG
SVG или скалярная векторная графика - это графика на основе расширенного языка разметки, поддерживающая двухмерную анимацию изображений, повышающую интерактивность. Спецификации SVG - это открытые стандарты консорциума World Wide Web, определенные в текстовых файлах XML. Эти файлы можно изменять или создавать с помощью любого программного обеспечения для рисования или редакторов текстовых файлов.
JQuery предоставляет плагин Drawsvg.js для рисования или анимации изображений SVG различными способами для веб-страниц разработчика, который очень легкий и простой в использовании. Пути изображений SVG рисуются в анимации вместе с опциями поддержки ступенчатого и плавного воспроизведения. Загрузите необходимые файлы и сохраните их в своей рабочей папке для включения в свой код, как показано в следующих программах.
Пример 1: В следующем примере демонстрируется простая анимация прямоугольника с круговой вершиной с использованием плагина jQuery DrawSVG. Элемент пути является наиболее важным элементом для создания основных фигур, таких как линии и дуги, в библиотеке SVG. Он также может создавать сложные формы, комбинируя многие базовые. «D» - параметр для определения формы элемента.
- Программа:
<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
meta
name
=
"viewport"
content
=
"width=device-width, initial-scale=1"
>
<
title
>jQuery DrawSVG Plugin</
title
>
<
link
rel
=
"stylesheet"
href
=
" https://fonts.googleapis.com/css?family=Open +Sans:400,600"
>
<
link
rel
=
"stylesheet"
href
=
"style.css"
>
<
script
async
src
=
"//assets.codepen.io/assets/embed/ei.js"
>
</
script
>
<
script
src
=
</
script
>
<
script
src
=
</
script
>
<
script
src
=
"jquery.drawsvg.min.js"
></
script
>
<
style
>
body {
background: green;
text-align: center;
}
.height {
height: 10px;
}
svg {
width: 550px;
position: fixed; // for visibility
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
</
style
>
</
head
>
<
body
>
<
h1
style
=
"color:white"
>GeeksforGeeks</
h1
>
<
b
>jQuery DrawSVG plugin</
b
>
<
div
class
=
"wrapper"
>
<
svg
width
=
"200"
height
=
"200"
viewBox
=
"0 0 145 260"
>
<
g
stroke
=
"#FFFFFF"
stroke-width
=
"3"
>
<!-- Z is for Close Path -->
<
path
d
=
"M 10 10 H 90 V 90 H 10 L 10 10 Z"
fill
=
"transparent"
stroke
=
"black"
/>
<!-- The Points -->
<
circle
cx
=
"12"
cy
=
"12"
r
=
"10"
fill
=
"red"
/>
<
circle
cx
=
"92"
cy
=
"94"
r
=
"10"
fill
=
"red"
/>
<
circle
cx
=
"90"
cy
=
"14"
r
=
"10"
fill
=
"red"
/>
<
circle
cx
=
"10"
cy
=
"92"
r
=
"10"
fill
=
"red"
/>
</
g
>
</
svg
>
</
div
>
<
script
>
// Initialization
var $svgVar = $('svg').drawsvg();
$svgVar.drawsvg('animate');
</
script
>
</
body
>
</
html
>
- Выход:
Пример 2: В следующем примере демонстрируется метод drawsvg () вместе с настройкой параметров и использованием метода обратного вызова. Функция обратного вызова выполняется после завершения анимации.
- Программа:
<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
meta
name
=
"viewport"
content
=
"width=device-width, initial-scale=1"
>
<
title
>jQuery DrawSVG Plugin</
title
>
<
link
rel
=
"stylesheet"
href
=
" https://fonts.googleapis.com/css?family=Open +Sans:400,600"
>
<
link
rel
=
"stylesheet"
href
=
"style.css"
>
<
script
async
src
=
"//assets.codepen.io/assets/embed/ei.js"
>
</
script
>
<
script
src
=
</
script
>
<
script
src
=
</
script
>
<
script
src
=
"jquery.drawsvg.min.js"
></
script
>
<
style
>
body {
background: green;
text-align: center;
}
.height {
height: 10px;
}
/* SVG element is fixed for visibilty */
svg {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
</
style
>
</
head
>
<
body
>
<
h1
style
=
"color:white"
>GeeksforGeeks </
h1
>
<
b
>DrawSVG plugin with callback method</
b
>
<
div
class
=
"wrapper"
>
<
svg
viewBox
=
"0 0 200 260"
style
=
"background-color:#ffffff00"
width
=
"200"
height
=
"250"
>
<
g
stroke
=
"#FFFFFF"
stroke-width
=
"3"
fill
=
"none"
>
<!--The shape of path element is defined
by "d" parameter -->
<
path
d="M157.068 33H165c4.77 0 9 4.464 9
9.706v202.758c0 5.243-4.288
9.536-9.524 9.536H10.524C5.288
255 1 250.707 1 245.464V42.707C1
37.464 5.06 33 10.017 33h9.203" />
<!--The "Move to" command is called with M -->
<
path
d
=
"M103.302 33H157v45H19V33h52.72"
/>
<!--Co-ordinates by "d" are unitless in
the user coordinate system-->
<
path
d
=
"M18.696 103h137.896v.17"
/>
<
path
d
=
"M18.738 155h137.854v.068"
/>
<
path
d
=
"M18.738 178h137.854v-.006"
/>
<
path
d
=
"M18.696 227h137.868v-.21"
/>
</
g
>
</
svg
>
</
div
>
<
div
id
=
"callbackDiv"
></
div
>
<
script
>
var $svg = $("svg").drawsvg({
stagger: 2000, // Break is set to 2 seconds
duration: 5000,
callback: function() {
$('#callbackDiv').html('<
p
>
<
strong
>Animation completed !</
strong
>
</
p
>');
}
}).drawsvg("animate");
</
script
>
</
body
>
</
html
>
- Выход:
Пример 3: В следующем примере демонстрируется метод drawsvg () с событием прокрутки страницы. Путь анимируется в стиле постепенного появления и исчезновения в зависимости от прокрутки страницы пользователем вверх и вниз. Текущая страница должна быть прокручиваемой, как показано в сценарии ниже.
- Программа:
<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
meta
name
=
"viewport"
content
=
"width=device-width, initial-scale=1"
>
<
title
>jQuery DrawSVG Plugin</
title
>
<
link
rel
=
"stylesheet"
href
=
" https://fonts.googleapis.com/css?family=Open +Sans:400,600"
>
<
link
rel
=
"stylesheet"
href
=
"style.css"
>
<
script
async
src
=
"//assets.codepen.io/assets/embed/ei.js"
>
</
script
>
<
script
src
=
</
script
>
<
script
src
=
</
script
>
<
script
src
=
"jquery.drawsvg.min.js"
></
script
>
<
style
>
body {
background: green;
text-align: center;
}
.wrapper {
height: 1800px;
}
/* For visibility */
svg {
position: fixed;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
</
style
>
</
head
>
<
body
>
<
h1
style
=
"color:white"
>GeeksforGeeks</
h1
>
<
b
>Draw On Scroll, Please scroll down and up</
b
>
<
div
class
=
"wrapper"
>
<
svg
style
=
"background-color:#ffffff00"
width
=
"200"
height
=
"150"
viewBox
=
"0 0 200 150"
>
<
g
stroke
=
"#FFFFFF"
stroke-width
=
"2"
fill
=
"none"
>
<!--The path element is the general shape used in SVG -->
<
path
d="M137.484 69.432c0 37.536-30.425 67.96-67.97
67.96-37.535 0-67.953-30.424-67.953-67.96C1.56
31.9 31.98 1.474 69.516 1.474c37.544 0 67.97
30.425 67.97 67.958z" />
<
path
d="M118.228 68.774c0 26.78-21.702 48.488-48.496
48.488-26.772 0-48.48-21.71-48.48-48.488 0-26.776
21.708-48.48 48.48-48.48 26.794 0 48.496 21.704
48.496 48.48z" />
<
path
d
=
"M37 68.998C37 50.773 51.55 36 69.495 36"
/>
<
path
d="M128.008 104.035l54.93 55.05c5.754 5.764 5.758
15.208.007 20.98l-2.886 2.894c-5.752 5.772-15.174
5.783-20.94.024l-55.128-55.078" />
</
g
>
</
svg
>
</
div
>
<
script
>
var $docVar = $(document),
$winVar = $(window),
$svgVar = $('svg').drawsvg(),
max = $docVar.height() - $winVar.height();
$winVar.on('scroll', function() {
var p = $winVar.scrollTop() / max;
$svgVar.drawsvg('progress', p);
});
</
script
>
</
body
>
</
html
>
- Вывод: Анимация всегда зависит от скорости прокрутки.