एसवीजी के साथ पाक कला पिज्जा

अंग्रेजी से अनुवाद: एसवीजी के साथ पिज्जा कैसे पकाने के लिए?

इस लेख में, हम सीखेंगे कि लो-कैलोरी पिज्जा कैसे पकाने के लिए, जिसे एसवीजी के प्रशंसकों से अपील करनी चाहिए। पिज्जा में एसवीजी-टेस्ट और स्वादिष्ट टॉपिंग शामिल होंगे।



चलिए टेस्ट से शुरू करते हैं!

एसवीजी आटा

एसवीजी का उपयोग करके आटा बनाना नियमित आटा के साथ करने की तुलना में बहुत आसान है। हमें अंडे, आटा, दूध आदि की आवश्यकता नहीं है। हमारा आटा एक रेडियल ढाल से मिलकर बनेगा:

<radialGradient id="doughGradient"> <stop class="dough" offset="0%"/> <stop class="dough" offset="80%"/> <stop class="brownish-side" offset="97%"/> <stop class="dough" offset="100%"/> </radialGradient> 

हम परीक्षण को एक चक्र का आकार देंगे:

 <circle id="dough" cx="310" cy="310" r="300" style="fill:url(#doughGradient)" /> 

अगला, बाहरी CSS में, हम ग्रेडिएंट के लिए स्टॉप कलर्स को परिभाषित करेंगे:

 #doughGradient .brownish-side { stop-color: #ff9955 } #doughGradient .dough { stop-color: #ffeeaa } 

पूर्णतावादी पूछेंगे कि बाहरी सीएसएस में सर्कल के लिए भरण संपत्ति क्यों नहीं प्रदान की गई है?

 #dough { fill: url(#doughGradient) } 

यह सरल है, यह हर किसी के लिए पिज्जा है, न कि केवल क्रोमियम उपयोगकर्ताओं के लिए। दुर्भाग्य से, ओपेरा और फ़ायरफ़ॉक्स अभी भी इस तरह के परिपत्र लिंक का समर्थन नहीं करते हैं।
ओपेरा प्रेमियों को नाराज न करने के लिए, मैं ध्यान देता हूं कि एसवीजी विनिर्देशों के लिए समर्थन अन्य ब्राउज़रों से कुछ कदम आगे है, ठीक है, रेंडरिंग गति के साथ सब कुछ ठीक है।

हमारा एसवीजी आटा तैयार है।

टॉपिंग

सलामी

स्मोक्ड सॉसेज को आमतौर पर उत्तरी अमेरिका में पेपरोनी और रूस और यूरोप में सलामी कहा जाता है। वास्तव में, उनके बीच अंतर न्यूनतम है और उनके बीच अंतर करना मुश्किल है। इस मामले में, हमें एक सर्कल की आवश्यकता है।

 <circle cx="50" cy="50" r="50" class="pepperoni-base"/> 

इस सर्कल पर हम वसा के विशिष्ट समावेशन रखते हैं। यहाँ उनमें से एक का उदाहरण दिया गया है:

 <path d="M23,23 16,30C16,30 16,25 18,24 20,23 23,23 23,23z" class="pepperoni-inc"/> 

ऐसे कई समावेश होने चाहिए। यदि कई समावेशन में एक ही रंग होता है, तो उन्हें d पैरामीटर के अंदर एक पथ तत्व के अंदर क्रमिक रूप से रखा जा सकता है। कृपया ध्यान दें कि संख्याओं का अगला क्रम केवल अक्षर z के बाद शुरू होना चाहिए।

आप बाहरी CSS में निम्नलिखित घोषणा का उपयोग करते हुए एक वृत्त बना सकते हैं:

 #pepperoni .pepperoni-base { fill: #a02c2c; stroke-width: 2 } 

वसायुक्त समावेशन डिजाइन करने के लिए, आप निम्नलिखित टेम्पलेट का उपयोग कर सकते हैं:

 #pepperoni .pepperoni-inc { fill: #782121; stroke: none } 

आपको बस इन वर्गों के लिए इन नामों और नामों के लिए रंगों के साथ आना होगा।

कनेक्ट करने के लिए इन वर्गों से सजावट के लिए, आपको पहचानकर्ता #pepperoni के साथ जी तत्व के अंदर सामग्री को समूहित करने की आवश्यकता है।

परिणाम सलामी का एक चक्र है ।

टमाटर

टमाटर के बिना क्या पिज्जा? आमतौर पर, एक टमाटर में एक समोच्च होता है, जिस पर कई टुकड़े रखे जाते हैं और प्रत्येक टुकड़े में बीज बिखरे होते हैं।
तो रूपरेखा:

 <path d="M 107,52 A 52,48 0 0 1 3,52 52,48 0 1 1 107,52z" class="tomato-base"/> 

एक टुकड़ा इस तरह हो सकता है:

 <path d="M56,16 57,48C57,48 63,31 70,37 76,44 64,50 64,50L92,48C104,46 96,35 85,23 73,11 55,4 56,16z" class="tomato-segment"/> 

वे सभी एक पथ तत्व में भी लिखे जा सकते हैं।

टमाटर के बीज को भी टुकड़ों में विभाजित किया जा सकता है और पथ को लिखा जा सकता है।

 <path d="M62,38C62,38 59,33 61,31 62,30 63,31 63,31 64,34 62,38 62,38z" class="tomato-seed" /> 

सरल सीएसएस जोड़कर, आप अपने टमाटर, स्लाइस और बीज एक नज़र दे सकते हैं।

 #tomato .tomato-base { fill: #ff333f; stroke: none } #tomato .tomato-segment { fill: #d40000; stroke: none } #tomato .tomato-seed { fill: #ffaaaa; stroke: none } 

अंत में, टमाटर इस तरह दिखेगा।

जैतून

जैतून का प्रोटोटाइप निम्नलिखित एसवीजी कोड का उपयोग करके बनाया जा सकता है:

 <path id=”olive” d="M68,47C68,59 55,63 44,66 32,70 23,59 23,47 23,36 33,26 45,26 57,26 68,36 68,47z" /> 

इसके अलावा, उपयोग करके , आप इस प्रोटोटाइप के हरे और काले संस्करण बना सकते हैं:

 <use id="greenOlive" xlink:href="#olive" /> <use id="blackOlive" xlink:href="#olive" /> 

जैतून के बीच, अगर हमें एक पत्थर मिला - खाली। इसलिए, निम्नलिखित सीएसएस कोड हमें प्रोटोटाइप के डिजाइन में मदद करेगा:

 #olive { fill: none; stroke-width: 22; } 

अगला, आप हरे और काले संस्करणों में रंग असाइन कर सकते हैं:

 #greenOlive { stroke: #7db000; } #blackOlive { stroke: #000; } 

परिणाम SVG जैतून की एक जोड़ी है

मशरूम

मशरूम को हमारे पिज्जा में भी मिलाया जाना चाहिए। प्रक्रिया को गति देने के लिए, यह इंकस्केप वेक्टर संपादक का उपयोग करने के लिए समझ में आता है , जिसके बारे में पहले से ही सामग्री थी ।
Champignon का समोच्च निम्न प्रकार से बनाया जा सकता है:

 <path d="M 37,63 C 44,67 61,69 68,62 68,52 63,42 66,32 72,26 84,32 88,38 90,42 85,42 83,42 80,47 88,50 92,46 96,41 98,34 97,28 94,16 89,9 77,4 55,0 27,-4 9,13 -1,27 1,47 15,55 21,57 23,46 17,48 12,51 10,43 12,40 15,34 22,30 28,30 38,33 32,52 37,63 z" class="champignon-shape"/> 

आप शैंपेन पर प्लेटें भी खींच सकते हैं।

 <path d="M11,45C11,30 31,22 50,21 70,20 90,26 89,39 77,31 69,39 66,33 61,25 22,34 11,45z" class="champignon-gills"/> 

शैंपेन का समूह:

 <g id="champignon"></g> 

और रूपरेखा और गिल्स को रंग असाइन करें:

 #champignon .champignon-shape { fill: #f6e5ae } #champignon .champignon-gills { fill: #957f66 } 

एसवीजी शैंपेन तैयार है ।

बेल का काली मिर्च

एक घंटी मिर्च प्रोटोटाइप जोड़ें। Inkscape के साथ ड्रॉ करना भी आसान है।

 <path id="bellPepper" d="M 130,140 C 210,120 170,16 110,33 67,-9 31,30 26,35 3.8,57 14,89 28,110 25,140 64,220 130,140 z M 38,42 C 19,47 22,77 34,85 41,94 54,96 64,96 66,100 48,100 46,120 45,140 50,160 71,160 89,170 110,140 110,140 110,120 89,100 100,100 110,100 150,120 150,110 170,97 160,48 120,48 110,48 110,68 96,70 80,45 71,14 38,42 z"/> 

अब आप इस प्रोटोटाइप का उपयोग काली मिर्च का हरा, लाल और पीला संस्करण बनाने के लिए कर सकते हैं।

 <use id="redBellPepper" xlink:href="#bellPepper" /> <use id="greenBellPepper" xlink:href="#bellPepper" /> <use id="yellowBellPepper" xlink:href="#bellPepper" /> 

हमारे मिर्च अंदर खाली होना चाहिए। इसलिए, हम प्रोटोटाइप के लिए निम्नलिखित सीएसएस को परिभाषित करते हैं:

 #bellPepper { fill-rule: evenodd } 

यह ब्राउज़र को बताता है कि हमारे मार्ग में घोंसले के टुकड़े खाली होने चाहिए।

अब आप काली मिर्च को रंग दे सकते हैं:

 #redBellPepper { fill: #DA251D; } #greenBellPepper { fill: #008000; } #yellowBellPepper { fill: #ffcc00; } 

तीन एसवीजी मिर्च तैयार हैं ।

मिर्च मिर्च

हमारे पिज्जा को मसाले के लिए, मिर्च मिर्च जोड़ें। उसकी आकृति घुमावदार है:

 <path d="M2,17C2,17 20,22 33,23 65,26 52,29 101,23 138,21 196,15 241,12 257,11 256,40 246,41 171,49 68,48 33,37 21,34 2,17 2,17z" class="chili-pepper-body"/> 

और हरी पूंछ:

 <path d="M296,2C294,2 257,26 253,23 L250,14C234,25 244,30 249,40L253,32C256,34 316,1 296,2z" class="chili-pepper-tail"/> 

इसे एक समूह में रखें:

 <g id="chiliPepper"></g> 

और रंग जोड़ें:

 #chiliPepper .chili-pepper-body { fill: #aa0000 } #chiliPepper .chili-pepper-tail { fill: #008000 } 

नतीजतन, आप एसवीजी मिर्च खा सकते हैं, लेकिन यह बहुत मसालेदार है।

कुकिंग पिज्जा

सभी घटकों के तैयार होने के बाद, आप असेंबली कर सकते हैं।
ऐसा करने के लिए, हमें उपयोग तत्वों की बहुत आवश्यकता है। उदाहरण के लिए, आटा इस प्रकार रखा जा सकता है:

 <use xlink:href="#dough"/> 

या x, y पैरामीटर का उपयोग करके इसे थोड़ा शिफ्ट करें।

सलामी का एक टुकड़ा इस तरह रखा जा सकता है:

 <use xlink:href="#pepperoni" x="130" y="130" /> 

और इतने पर टमाटर, जैतून, मशरूम और मिर्च के साथ।

बस, एसवीजी पिज्जा तैयार है।

निष्कर्ष

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