jQuery | DrawSVG 插件

SVG或标量矢量图形是基于扩展标记语言的图形，支持图像的二维动画，增强了交互性。 SVG 的规范是 World Wide Web Consortium 在 XML 文本文件中定义的开放标准。可以使用任何绘图软件或文本文件编辑器更改或创建这些文件。

jQuery 提供了Drawsvg.js插件，可以为开发人员的网页以多种方式绘制或动画化 SVG 图像，非常轻巧且易于使用。 SVG 图像的路径与交错和缓动支持选项一起以动画方式绘制。下载所需的文件并将其保存在您的工作文件夹中以包含在您的代码中，如以下程序所示。

示例 1：下面的示例演示了带有圆形顶点的矩形的简单动画，使用 jQuery DrawSVG插件。路径元素是在 SVG 库中创建基本形状(如线条和圆弧)的最重要元素。它还可以创建结合许多基本形状的复杂形状。 “d”是定义元素形状的参数。

• 程序：

    
  
      
      
    
      jQuery DrawSVG Plugin
    
      
    
      
    
      
      
      
      
      
      
      
    
      
          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;
          }
      
  
    
  
      GeeksforGeeks
      jQuery DrawSVG plugin
    
      
          
                
              
                
                  
                  
    
                  
                  
                  
                  
                  
              
          
      
    
      
    
          // Initialization 
          var $svgVar = $('svg').drawsvg();
          $svgVar.drawsvg('animate');
      
  
    

• 输出：
  

示例 2：以下示例演示了drawsvg()方法以及选项设置和使用回调方法。一旦动画完成，就会执行回调函数。

• 程序：

    
  
      
      
      jQuery DrawSVG Plugin
      
      
    
      
      
      
      
      
      
      
    
      
          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;
          }
      
  
    
  
      GeeksforGeeks 
      DrawSVG plugin with callback method
      
          
                 
              
                  
                  
                  
                  
                  
                  
                  
                  
                  
                  
                  
              
          
      
      
    
      
          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");
      
  
    

• 输出：
  

示例 3：以下示例演示了带有页面滚动事件的drawsvg()方法。该路径以淡入和淡出样式动画，具体取决于用户在向上和向下方向上滚动页面。当前页面需要可滚动，如下面的脚本所示。

• 程序：

    
  
      
      
      jQuery DrawSVG Plugin
      
      
    
      
      
      
      
      
      
      
    
      
          body {
              background: green;
              text-align: center;
          }
             
          .wrapper {
              height: 1800px;
          }
             
          /* For visibility */
          svg {
              position: fixed; 
              margin: auto;
              top: 0;
              bottom: 0;
              left: 0;
              right: 0;
          }
      
  
    
  
      GeeksforGeeks
      Draw On Scroll, Please scroll down and up
      
          
                 
              
                
                  
                  
                  
                  
                  
              
          
      
    
      
          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);
          });
      
  
    

• 输出：动画始终取决于滚动速度。