SVG.js - राफेल के लिए एक योग्य प्रतियोगी

शुभ दिन, प्रिय हरजिताली। मैं आपके साथ GitHub - SVG.js पर एक अद्भुत खोज साझा करना चाहता हूं - सुविधाजनक हेरफेर और SVG का एनीमेशन । मैं उन तीन चीजों के बारे में कहना चाहता हूं, जिन्होंने इस लाइब्रेरी पर मेरा ध्यान केंद्रित किया है। सबसे सरल और सबसे महत्वपूर्ण बात यह है कि रेटिना के आगमन के साथ एसवीजी डिस्प्ले अधिक लोकप्रिय हो जाता है, पहले की तुलना में अधिक आवश्यक है। SVG.min.js का वज़न 34kb और Gzip में 9kb है, जो कि Raphaël से कई गुना छोटा है और जिसे आप डिज़ाइन और प्रभावों के लिए दान कर सकते हैं । 3kb मिनिमल SVG.filter.js वेबकिट-फ़िल्टर प्रॉपर्टी के लिए एक उत्कृष्ट क्रॉस-ब्राउज़र एनालॉग है।

सुविधाजनक वाक्यविन्यास:

var draw = SVG('canvas').size(300, 300) var rect = draw.rect(100, 100).attr({ fill: '#f06' }); rect.animate().move(150, 150); rect.animate({ ease: '<', delay: 1500 }).attr({ fill: '#f03' }); 

कार्यक्षमता:

• आकार, स्थिति, परिवर्तन (अनुवाद, रोटेशन, तिरछा, स्केल, मैट्रिक्स), रंगों का एनीमेशन
• तत्वों की मास्किंग और क्लिपिंग (मैंने इस लेख में समान सीएसएस गुणों के बारे में लिखा है )
• मॉड्यूलर संरचना, विस्तार लेखन में आसानी

   SVG.extend(SVG.Shape, { paintRed: function() { return this.fill({ color: 'red' }) } }) SVG.extend(SVG.Ellipse, { paintRed: function() { return this.fill({ color: 'orangered' }) } }) 

• पाठ पथ (एनीमेशन समर्थन के साथ)
• आइटम समूहीकरण
• गतिशील ग्रेडिएंट
• घटनाओं
• स्पष्ट दस्तावेज

मौजूदा प्लगइन्स

• svg.filter.js - एसवीजी फिल्टर ( गॉसियन ब्लर, हॉरिजॉन्टल ब्लर, डिसैबोरेट, सैचुरेट आदि) का एक सेट।
• svg.draggable.js - आपको आइटमों को खींचने और छोड़ने की अनुमति देता है
• svg.easing.js - एनीमेशन के लिए आसान तरीके
• svg.path.js - घटता ( डेमो ) बनाने के लिए बहुत सुविधाजनक प्लगइन
• svg.math.js - गणितीय कार्यों का एक समूह
• svg.foreignobject.js - विदेशी ऑबजेक्ट (एसवीजी तत्व जिसमें मनमाना HTML डाला गया है) का कार्यान्वयन
• svg.export.js और svg.import.js प्लगइन्स आयात करने और एक संपूर्ण SVG कैनवस या एक आइटम के निर्यात के लिए

ब्राउज़र समर्थन:

डेस्कटॉप:

• फ़ायरफ़ॉक्स 3+
• क्रोम 4+
• सफारी 3.2+
• ओपेरा 9+
• IE9 +

मोबाइल

• iOS सफारी 3.2+
• Android ब्राउज़र 3+
• ओपेरा मोबाइल 10+
• Android के लिए क्रोम 18+
• Android 15+ के लिए फ़ायरफ़ॉक्स

आपके ध्यान के लिए सभी को बहुत धन्यवाद।