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 =
 " 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 =
 " https://cdn.jsdelivr.net/jquery/1.11.3/jquery.min.js " >
    </ script >
    < script src =
 " https://cdn.jsdelivr.net/jquery.easing/1.3/jquery.easing.1.3.min.js " >
    </ 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"
            xmlns = " http://www.w3.org/2000/svg "
            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 =
 " https://cdn.jsdelivr.net/jquery/1.11.3/jquery.min.js " >
    </ script >
    < script src =
 " https://cdn.jsdelivr.net/jquery.easing/1.3/jquery.easing.1.3.min.js " >
    </ 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"
             xmlns = " http://www.w3.org/2000/svg "
             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 =
 " https://cdn.jsdelivr.net/jquery/1.11.3/jquery.min.js " >
    </ script >
    < script src =
 " https://cdn.jsdelivr.net/jquery.easing/1.3/jquery.easing.1.3.min.js " >
    </ 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"
             xmlns = " http://www.w3.org/2000/svg "
             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 > 

Вывод: Анимация всегда зависит от скорости прокрутки.

Вопросы о Web технологиях JQuery HTML CSS-Misc HTML-Misc CSS

jQuery | Плагин DrawSVG

РЕКОМЕНДУЕМЫЕ СТАТЬИ