स्केलेबल वेक्टर ग्राफिक्स (एसवीजी) में पाठ के साथ काम करना

हमारी पिछली पोस्टों में, हमने आकृति बनाने के लिए एसवीजी का उपयोग किया है। इस पोस्ट में, जैसा कि शीर्षक ने कहा है, हम देखेंगे एसवीजी के साथ पाठ का निर्माण. बहुत सी चीजें हैं जो हम पाठ के साथ कर सकते हैं जो सादे HTML पाठ करने में सक्षम है.

तो, चलो उन्हें बाहर की जाँच करें.

मूल कार्यान्वयन

लेकिन, इससे पहले कि हम आगे बढ़ें, आइए देखें कि कैसे एसवीजी में पाठ अपने मूल स्तर पर बनता है:

एसवीजी में पाठ, जैसा कि आप उपरोक्त कोड स्निपेट से देख सकते हैं, एक पर्याप्त तार्किक टैग के साथ परिभाषित किया गया है, . यह तत्व मूल रूप से केवल आवश्यकता है एक्स तथा y बेसलाइन निर्देशांक निर्दिष्ट करने की विशेषताएँ.

छवि स्रोत: Wikipedia.org

और यहाँ है कि टेक्स्ट कैसा दिखेगा। अभी के लिए ऐसा लगता है कि HTML में नियमित पाठ से कोई अंतर नहीं है.

मूल पाठ शैलियाँ

पाठ को CSS गुणों जैसे स्टाइल से भी देखा जा सकता है फ़ॉन्ट वजन, फ़ॉन्ट शैली, तथा text-decoration जिसे के माध्यम से लागू किया जा सकता है इनलाइन-शैली, आंतरिक-शैली या बाहरी शैली जैसे हमने पिछले पोस्ट में चर्चा की है CSS के साथ स्टाइलिंग SVG. यहाँ कुछ उदाहरण दिए गए हैं.

साहसिक

 यह स्केलेबल वेक्टर ग्राफिक (SVG) में पाठ है 

तिरछा

 यह स्केलेबल वेक्टर ग्राफिक (SVG) में इटैलिक टेक्स्ट है 

रेखांकित करना

 यह स्केलेबल वेक्टर ग्राफिक (SVG) में रेखांकित पाठ है 

तत्त्व

कुछ मामलों में, जब हम केवल पाठ के विशेष भाग में शैलियों या विशेषताओं को लागू करना चाहते हैं, तो हम उपयोग कर सकते हैं . नीचे दिए गए उदाहरण से पता चलता है कि हम कैसे जोड़ते हैं साहसिक, तिरछा तथा रेखांकित करना पाठ की एक पंक्ति के लिए.

 यह बोल्ड है, यह इटैलिक है तथा यह रेखांकित किया जा रहा है 

लेखन विधा

पाठ केवल से नहीं लिखा गया है बाएं से दाएं. उदाहरण के लिए, दुनिया के अन्य हिस्सों में, जापान से लिखा गया है ऊपर से नीचे. एसवीजी में, इसका उपयोग करके किया जा सकता है लेखन-मोड गुण.

 ぁ ぃ ぅ ぇ ぉ か き  

ऊपर के उदाहरण में, हमने कई यादृच्छिक जापानी अक्षर डाले हैं (मुझसे उनका अर्थ न पूछें, मुझे वास्तव में कोई पता नहीं है) और इस शैली की घोषणा के साथ अभिविन्यास को बदल दें।, लेखन-विधा: tb, कहा पे टीबी के लिए खड़ा है ऊपर से नीचे.

पाठ की रूपरेखा

एसवीजी में पाठ मूल रूप से एक ग्राफिक है, इसलिए हम भी आवेदन कर सकते हैं आघात पाठ में एक सीमा रेखा जोड़ने की विशेषता जैसे हमने अन्य आकृतियों के साथ की थी.

उपरोक्त कोड स्निपेट में, हमने जोड़ा है आघात को विशेषता तत्व और निर्दिष्ट करके पाठ का रंग हटा दें भरना की वजह से कोई नहीं जिसके परिणामस्वरूप निम्न पाठ प्रस्तुति होगी.

पाठ पथ

एसवीजी में, पाठ न केवल क्षैतिज और लंबवत रूप से प्रदर्शित होने में सक्षम है, बल्कि यह भी हो सकता है एक पथ पैटर्न का पालन करें. यहां है कि इसे कैसे करना है.

सबसे पहले, हमें परिभाषित करने की आवश्यकता है राह. हालांकि, HTML में सीधे एक पथ बनाना सहज नहीं है, हमें निर्देशांक और कुछ आदेशों को समझने की आवश्यकता है जो मुझे यकीन है कि हम में से अधिकांश बचने की कोशिश करेंगे। इसलिए, इस चरण को सरल बनाने के लिए, मैं व्यक्तिगत रूप से सिर्फ एक वेक्टर संपादक (इंकस्केप या इलस्ट्रेटर) खोलने का सुझाव देता हूं, एक पथ बनाएं, और एसवीजी कोड उत्पन्न करें.

फिर, डाल दिया तत्व अंदर तत्त्व. defs यहाँ परिभाषा का मतलब है.

ध्यान दें कि हमने भी जोड़ दिया है आईडी को विशेषता . अब, हमें केवल पथ को लिंक करना होगा आईडी के साथ हमारे पाठ के लिए तत्व, जैसे;

    लॉरेम इप्सम डोलर अमेट कंसेटेटुर.   

आगे की पढाई: एसवीजी पथ

पाठ ढाल

पाठ को भरने के लिए एक पृष्ठभूमि जोड़ना SVG में भी मौजूद है, और यदि आप ऊपर पाठ पथ अनुभाग में सफल हुए हैं, तो यह बहुत आसान होगा.

सबसे पहले, हमें ढाल रंगों को परिभाषित करने की आवश्यकता है.

जब सभी आवश्यक परिभाषाएँ सेट की जाती हैं, तो अब हमें केवल पाठ जोड़ने और संदर्भित करने की आवश्यकता है भरना ग्रेडिएंट की विशेषता आईडी विशेषता, निम्नानुसार;

 ढाल 

और यहाँ यह है, ढाल के साथ पाठ.

आगे की पढाई: एसवीजी ग्रेडिएंट और पैटर्न

आगे के संदर्भ

एसवीजी में पाठ निस्संदेह शक्तिशाली है, वास्तव में ऐसी कई चीजें हैं जो हम इस पोस्ट में आगे बढ़ सकते हैं। इसलिए, नीचे हमने इस विषय में आपकी रुचि की सेवा के लिए कुछ और संदर्भ दिए हैं.

• SVG - Divya Manian में फ़ॉन्ट्स के बारे में
• एसवीजी टेक्स्ट आधिकारिक दस्तावेज - W3.org
• मोज़िला देव में एसवीजी डोविशन। उदाहरण और उपकरण के साथ नेटवर्क - एमडीएन
• एसवीजी लेखन मोड विशेषता - एमडीएन

• डेमो देखें
• स्रोत डाउनलोड करें