jQuery DrawSVG 插件

SVG或Scalar Vector Graphics是基于扩展标记语言的图形，支持图像的二维动画，增强了互动性。SVG的规格是由万维网联盟制定的开放标准，在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>

输出:

jQuery DrawSVG Plugin

例子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 visibility */
        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>

输出:

jQuery DrawSVG Plugin

例子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>