SVG ग्राफ़िक्स का उपयोग करने के लिए jQuery प्लगइन। भाग 1

एसवीजी के साथ काम करने के लिए कई ड्राइंग लाइब्रेरी हैं। हम jQuery के लिए प्लगइन को देखेंगे।

परिचय

कीथ वुड प्लगइन के लेखक, सिडनी, ऑस्ट्रेलिया में रहते हैं। एक जावा डेवलपर के रूप में फेयरफैक्स मीडिया द्वारा संचालित। इन वर्षों में, jQuery समुदाय में योगदान रहा है। JQuery प्लगइन्स विकसित करने पर एक पुस्तक पर काम कर रहा है।

Jquery.svg.js प्लगइन आपको एसवीजी 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> 

हम एक फ़ंक्शन के रूप में एसवीजी कैनवास को div में संलग्न करते हैं

 $(selector).svg(); 

चयनकर्ता - आईडी टैग की संपत्ति
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); } 

  
  परिणाम
  
  

तुलना के लिए, मैं एसवीजी प्रारूप में कोड और jQuery प्लगइन कोड देगा।

एसवीजी कोड

 <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});