SVGグラフィックスを使用するためのjQueryプラグイン。 パート1

SVGを操作するための多くの描画ライブラリがあります。 jQueryのプラグインを見てみましょう。

はじめに

Keith Woodプラグインの作成者は、オーストラリアのシドニーに住んでいます。 Java開発者としてFairfax Mediaを使用。 長年にわたり、jQueryコミュニティに貢献してきました。 jQueryプラグインの開発に関する本に取り組んでいます。



jquery.svg.jsプラグインを使用すると、SVG 1.1仕様に従ってベクターグラフィックスを操作できます。

説明付きの例

参照ドキュメント



プラグインを接続するために、 ヘッド部分でスタイルファイルとプラグインを規定します。

<style type="text/css">@import "jquery.svg.css";</style> <script type="text/javascript" src="jquery.svg.js"></script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

また、必要に応じて、プラグイン拡張機能を接続します

 <script type="text/javascript" src="jquery.svganim.js"></script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

SVGキャンバスを関数としてdivに添付します

 $(selector).svg();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

selector- divタグのidプロパティ

svg（）はプラグイン関数です。



キャンバスで次の操作が可能です。

• 特定のコンテナのラッパーを取得する
  
  

   $(selector).svg('get');
        
        
  
          
          
          
        
  
      
          
          
          
        
        
  
          
          
          
        
  
      
       

  
  
  一例
  
  

   var svg = $('#svgintro').svg('get'); svg.circle(130, 75, 50, {fill: 'none', stroke: 'red', strokeWidth: 3});
        
        
  
          
          
          
        
  
      
          
          
          
        
        
  
          
          
          
        
  
      
       

  
  
  
• 特定のコンテナの機能を削除する
  
  

   $(selector).svg('destroy');
        
        
  
          
          
          
        
  
      
          
          
          
        
        
  
          
          
          
        
  
      
       

  
  
  
• 挿入するソースドキュメントのURL
  
  

   $(selector).svg({loadURL: 'lion.svg'});
        
        
  
          
          
          
        
  
      
          
          
          
        
        
  
          
          
          
        
  
      
       

  
  
  
• プラグインメソッドを使用して図面を作成するためのコードでdrawIntro関数を呼び出す
  
  

   $(selector).svg({onLoad: drawIntro});
        
        
  
          
          
          
        
  
      
          
          
          
        
        
  
          
          
          
        
  
      
       

  
  
  drawIntro関数の例
  
  

   function drawIntro(svg) { svg.circle(75, 75, 50, {fill: 'none', stroke: 'red', strokeWidth: 3}); var g = svg.group({stroke: 'black', strokeWidth: 2}); svg.line(g, 15, 75, 135, 75); svg.line(g, 75, 15, 75, 135); }
        
        
  
          
          
          
        
  
      
          
          
          
        
        
  
          
          
          
        
  
      
       

  
  
  結果
  
  
  
  

比較のために、SVG形式のコードとjQueryプラグインコードを提供します。



SVGコード

 <rect x="20" y="50" width="100" height="50" fill="yellow" stroke="navy" stroke-width="5" /> <rect x="150" y="50" width="100" height="50" rx="10" fill="green" /> <g transform="translate(270 80) rotate(-30)"> <rect x="0" y="0" width="100" height="500" rx="10" fill="none" stroke="purple" stroke-width="3" /> </g> <circle cx="70" cy="220" r="50" fill="red" stroke="blue" stroke-width="5" /> <g transform="translate(175 220)"> <ellipse rx="75" ry="50" fill="red" /> </g> <ellipse transform="translate(300 220) rotate(-30)" rx="75" ry="50" fill="none" stroke="blue" stroke-width="10" /> <g stroke="green" > <line x1="450" y1="120" x2="550" y2="20" stroke-width="5" /> <line x1="550" y1="120" x2="650" y2="20" stroke-width="10" /> <line x1="650" y1="120" x2="750" y2="20" stroke-width="15" /> <line x1="750" y1="120" x2="850" y2="20" stroke-width="20" /> <line x1="850" y1="120" x2="950" y2="20" stroke-width="25" /> </g> <polyline fill="none" stroke="blue" stroke-width="5" points="450,250 475,250 475,220 500,220 500,250 525,250 525,200 550,200 550,250 575,250 575,180 600,180 600,250 625,250 625,160 650,160 650,250 675,250" /> <polygon fill="lime" stroke="blue" stroke-width="10" points="800,150 900,180 900,240 800,270 700,240 700,180" />
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

jQuery.SVGの同じ描画コード

 svg.rect(20, 50, 100, 50, {fill: 'yellow', stroke: 'navy', strokeWidth: 5}); svg.rect(150, 50, 100, 50, 10, 10, {fill: 'green'}); var g = svg.group({transform: 'translate(270 80) rotate(-30)'}); svg.rect(g, 0, 0, 100, 50, 10, 10, {fill: 'none', stroke: 'purple', strokeWidth: 3}); svg.circle(70, 220, 50, {fill: 'red', stroke: 'blue', strokeWidth: 5}); var g = svg.group({transform: 'translate(175 220)'}); svg.ellipse(g, '', '', 75, 50, {fill: 'yellow'}); svg.ellipse('', '', 75, 50, {transform: 'translate(300 220) rotate(-30)', fill: 'none', stroke: 'blue', strokeWidth: 10}); var g = svg.group({stroke: 'green'}); svg.line(g, 450, 120, 550, 20, {strokeWidth: 5}); svg.line(g, 550, 120, 650, 20, {strokeWidth: 10}); svg.line(g, 650, 120, 750, 20, {strokeWidth: 15}); svg.line(g, 750, 120, 850, 20, {strokeWidth: 20}); svg.line(g, 850, 120, 950, 20, {strokeWidth: 25}); svg.polyline([[450,250], [475,250],[475,220],[500,220],[500,250], [525,250],[525,200],[550,200],[550,250], [575,250],[575,180],[600,180],[600,250], [625,250],[625,160],[650,160],[650,250],[675,250]], {fill: 'none', stroke: 'blue', strokeWidth: 5}); svg.polygon([[800,150],[900,180],[900,240],[800,270],[700,240],[700,180]], {fill: 'lime', stroke: 'blue', strokeWidth: 10});