एसवीजी में एक बटन ड्रा करें

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



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



शुरू करने के लिए, मैं चेतावनी देना चाहता हूं कि एसवीजी क्षेत्र मेरे लिए पूरी तरह से नया है, और मेरे पास सभी बोधगम्य कार्यों और सभी प्रकार की मुश्किल चालों का पूरी तरह से पता लगाने का अवसर नहीं था। तदनुसार, यदि पाठ में एक वाक्यांश शामिल है जैसे "यह करना असंभव है," इसे केवल एक संक्षिप्त रूप से समझें "मुझे ऐसा करने का कोई तरीका नहीं मिला है या तो मानक में, या पाठ्यपुस्तकों में, या Google में।" :-) स्वाभाविक रूप से, मैं किसी भी सुधार और स्पष्टीकरण के लिए बहुत आभारी रहूंगा।



अब, टीके के लिए नीचे आते हैं: मैं एक सुंदर स्केलेबल छवि रखना चाहता हूं जिसे वेब पृष्ठों पर एक बटन के रूप में इस्तेमाल किया जा सकता है। प्रायोगिक डिजाइन के आधार के रूप में, मैंने वह बटन चुना जो मुझे साइट से पसंद आया था एक दिन की फाइलें :







तस्वीर को थोड़ा हल करने के बाद, मैंने इसका वेक्टर विवरण बनाया: सीमा के साथ गोल किनारों के साथ एक ग्रे आयत है, जिसके अंदर दो रैखिक क्षेत्रों (50% / 50%) से मिलकर एक ऊर्ध्वाधर ढाल है। परिणाम एसवीजी पाठ के पहले वर्ग के लिए एक प्रारंभिक कार्य था; समाधान इस तरह दिख सकता है:

<defs> <linearGradient id="btnGrad" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" stop-color="#777777" /> <stop offset="50%" stop-color="#303030" /> <stop offset="100%" stop-color="#1c1c1c" /> </linearGradient> </defs> <rect style="fill: url(#btnGrad); stroke: #7f7f7f; stroke-width: 1px;" x="0px" y="0px" width="100%" height="100%" rx="5px" />
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

(इसके बाद, मैं XML हेडर और जगह बचाने के लिए <svg> टैग की परिभाषा को छोड़ दूंगा।)



हालांकि, यह इतना आसान नहीं है। यहाँ यह कैसा दिखता है:







तेज-तर्रार कामरेडों ने शायद पहले ही देख लिया है कि यहाँ कुछ गड़बड़ है। बाकी के लिए, मैं सीमा के रंग को लाल रंग से बदल दूंगा और छवि को बढ़ा दूंगा ताकि यह बेहतर दिखे:











सबसे पहले, सीमा उम्मीद की तुलना में कुछ प्रकार की धुंधली, धुंधली और गहरी हो गई। दूसरे, सीमा के कोने वाले हिस्से पक्षों की तुलना में स्पष्ट रूप से मोटे हैं। तीसरे, गोलाई के संक्रमण सुचारू नहीं हैं, लेकिन कोणीय हैं।



पूरी परेशानी यह है कि वेक्टर निर्देशांक पिक्सल के केंद्रों में नहीं हैं, लेकिन उनके बीच "अंतराल" में हैं। स्वाभाविक रूप से, जब इस तरह की रेखा खींचना अपनी पूरी लंबाई के साथ दो पड़ोसी पदों के बीच "धुंधला" होता है, और रेखा के "हिस्सों" में से एक तस्वीर के बाहर होता है और प्रदर्शित नहीं होता है। यदि हमारे पास एक नियमित आयत होती है, तो हम इसे रंग को एक उज्जवल एक (धुंधला के लिए क्षतिपूर्ति करने के लिए) या यहां तक ​​कि सीमा की मोटाई को दो पिक्सेल पर सेट करके एक सुविधा घोषित कर सकते हैं। हालांकि, हमारे मामले में, यह समस्या को हल नहीं करेगा, गोल कोने सब कुछ खराब कर देते हैं: वे पूरी तरह से दृश्यता के क्षेत्र में हैं, इसलिए संक्रमण कोणीय रहेगा, और वक्रों में लाइनों की मोटाई पार्श्व सीमाओं के विपरीत "पूर्ण" रहेगी। कैसे हो? आप निर्देशांक को आधे पिक्सेल से स्थानांतरित करने का प्रयास कर सकते हैं, इससे "अंतर-पिक्सेल" की समस्या हल हो जाएगी। लेकिन इस मामले में, हम अब चौड़ाई और ऊंचाई को सही ढंग से निर्धारित नहीं कर पाएंगे: "एक सौ प्रतिशत माइनस एक पिक्सेल" मूल्य निर्दिष्ट करना असंभव है। किसी भी 95% को सेट करना व्यर्थ है: छोटे बटन के लिए 5% का अंतर बहुत छोटा होगा, बड़े बटन के लिए यह बहुत बड़ा होगा। यदि हम सभी आकारों को केवल पिक्सेल में निर्दिष्ट करते हैं, तो हम आवश्यक स्केलिंग मोड प्रदान करने में सक्षम नहीं होंगे: सीमा मोटाई तुरंत छवि आकार से बंध जाएगी और आनुपातिक रूप से बदल जाएगी। नतीजतन, यदि हम छवि को क्षैतिज रूप से फैलाते हैं, तो ऊंचाई को अपरिवर्तित (एक वेब पेज पर बटन का एक विशिष्ट उपयोग) छोड़कर, तो साइड बॉर्डर ऊपर और नीचे से अधिक मोटा हो जाएगा, जो बहुत बदसूरत दिखता है।



यहां मुख्य समस्या यह है कि हम प्रतिशत और पिक्सेल निर्देशांक, छवि के निश्चित भाग के साथ स्केलेबल भाग को संयोजित करने का प्रयास कर रहे हैं, जिसे एसवीजी में स्वीकार नहीं किया गया है। इसके अलावा, जैसा कि यह निकला, प्रतिशत निर्देशांक केवल आंकड़ों के लिए निर्दिष्ट किए जा सकते हैं। <पथ> टैग सिद्धांत में उनका समर्थन नहीं करता है (पाठ्यपुस्तकों के आश्वासन के बावजूद कि सभी आंकड़े सिर्फ <पथ> के विशेष मामले हैं)। ठीक है, चलो साधारण आकृतियों के साथ प्राप्त करने की कोशिश करते हैं, और परिवर्तन की विशेषता हमें इसके साथ मदद करेगी। चाल यह है कि हम प्रारंभिक समन्वय को 100% पर सेट करते हैं, चौड़ाई और ऊँचाई को निश्चित रूप से इंगित करते हैं - पिक्सेल में, और परिणामी आकृति (चित्र के बाहर स्थित) को स्थानांतरित करते हुए, इसे वांछित संख्या में पिक्सेल में स्थानांतरित करते हैं। उदाहरण के लिए, निचले बाएं कोने में 5 × 10 आयत बनाने के लिए, आप निम्नलिखित कोड का उपयोग कर सकते हैं:

 <rect x="0px" y="100%" width="5px" height="10px" transform="translate(0, -10)" />
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

दुर्भाग्य से, यहां तक ​​कि यह ट्रिक एक बार भी पूरी बॉर्डर को एक सिंगल <रेक्ट> टैग के साथ खींचने में मदद नहीं करेगी, लेकिन हम साधारण आकृतियों को जोड़कर, उस क्षेत्र के लिए एक मुखौटा खींच सकते हैं, जहां बॉर्डर जाना चाहिए, और फिर भरें। मुखौटा खींचने का विशिष्ट तरीका, निश्चित रूप से भिन्न हो सकता है, लेकिन मैंने इसे इस तरह से किया: दो आयताकार फ्रेम आधे पिक्सेल द्वारा स्थानांतरित किए जाने के बाद, मैंने एक आम सीमा आयत की रूपरेखा तैयार की। फिर उसने कोने के खंडों को काट दिया, उनके स्थान पर मंडलियों को डाल दिया और अंत में, इन हलकों के अतिरिक्त हिस्सों को काट दिया, जिससे कोनों को गोल करने के लिए केवल एक चौथाई रह गया। यहाँ परिणामी कोड है:

 <mask id="boundRect"> <rect style="fill: none; stroke: #ffffff; stroke-width: 1px;" x="0.5px" y="0.5px" width="100%" height="100%" /> <rect style="fill: none; stroke: #ffffff; stroke-width: 1px;" x="-0.5px" y="-0.5px" width="100%" height="100%" /> <g style="fill: #000000;"> <rect x="0px" y="0px" width="5px" height="5px" transform="translate(0, 0)" /> <rect x="0px" y="100%" width="5px" height="5px" transform="translate(0, -5)" /> <rect x="100%" y="0px" width="5px" height="5px" transform="translate(-5, 0)" /> <rect x="100%" y="100%" width="5px" height="5px" transform="translate(-5, -5)" /> </g> <g style="fill: #ffffff;"> <circle cx="5px" cy="5px" r="5px" transform="translate(0, 0)" /> <circle cx="5px" cy="100%" r="5px" transform="translate(0, -5)" /> <circle cx="100%" cy="5px" r="5px" transform="translate(-5, 0)" /> <circle cx="100%" cy="100%" r="5px" transform="translate(-5, -5)" /> </g> <g style="fill: #000000;"> <circle cx="5px" cy="5px" r="4px" transform="translate(0, 0)" /> <circle cx="5px" cy="100%" r="4px" transform="translate(0, -5)" /> <circle cx="100%" cy="5px" r="4px" transform="translate(-5, 0)" /> <circle cx="100%" cy="100%" r="4px" transform="translate(-5, -5)" /> <rect x="1px" y="5px" width="9px" height="5px" transform="translate(0, 0)" /> <rect x="5px" y="1px" width="5px" height="9px" transform="translate(0, 0)" /> <rect x="1px" y="100%" width="9px" height="5px" transform="translate(0, -10)" /> <rect x="5px" y="100%" width="5px" height="9px" transform="translate(0, -10)" /> <rect x="100%" y="5px" width="9px" height="5px" transform="translate(-10, 0)" /> <rect x="100%" y="1px" width="5px" height="9px" transform="translate(-10, 0)" /> <rect x="100%" y="100%" width="9px" height="5px" transform="translate(-10, -10)" /> <rect x="100%" y="100%" width="5px" height="9px" transform="translate(-10, -10)" /> </g> </mask>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

बेशक, <क्लिपपथ> के माध्यम से मास्क या क्रॉपिंग का उपयोग करना अधिक तर्कसंगत होगा क्योंकि हलकों से आवश्यक क्वार्टर काट दिया जाएगा, लेकिन यह निकला कि ओपेरा संस्करणों के 11 से कम ऐसे एम्बेडेड उपयोग के साथ यह सॉसेज कूल शुरू होता है: प्रारंभिक ड्राइंग सही ढंग से किया जाता है, लेकिन अगर कोई अन्य विंडो इसे ऊपर खींचती है, तो छवि अद्यतन सही ढंग से नहीं किया गया है। नेस्टेड मास्क को त्यागना और इस गड़बड़ के साथ बट की तुलना में साधारण आयतों के साथ कवर करना आसान हो गया।



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



अंतिम तस्वीर में, मैंने माउस पर मँडराते समय हाइलाइटिंग को भी जोड़ा और स्क्रिप्टिंग की मदद से बटन दबाया, और कुछ विवरणों का शैलियों में अनुवाद भी किया। इसके साथ, कोई कठिनाई उत्पन्न नहीं हुई, सब कुछ तुरंत काम किया, जैसा कि यह होना चाहिए, इसलिए मैं इन चीजों के विवरण के साथ पाठ को अव्यवस्थित नहीं करूंगा: वे किसी भी पाठ्यपुस्तक में हैं। परिणामी बटन का कोड यहां देखा जा सकता है ।



जो लोग यह देखना चाहते हैं कि यह किस तरह का दिखता है, वे लाइव उदाहरण का उपयोग करके देख सकते हैं (बेशक, एसवीजी समर्थन वाला ब्राउज़र आवश्यक है)।



टमाटर पकड़ने के लिए तैयार, आपका ध्यान देने के लिए धन्यवाद। :-)



UPD: लेख का दूसरा भाग