jQuery | Плагин DrawSVG

Опубликовано: 5 Января, 2022

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 =
    < 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 =
    < 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 =
    < 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 >
  • Вывод: Анимация всегда зависит от скорости прокрутки.