एक पथ के साथ घुमावदार पाठ - सीएसएस-ट्रिक्स

हम एक घुमावदार रेखा के साथ पाठ प्रवाह कर सकते हैं तीन सही एसवीजी में निर्मित उपकरणों के साथ: , और ।

स्निपेट

 Dangerous Curves Ahead

हाउ वी गॉट देट

कल्पना करें कि हम एसवीजी में एक घुमावदार रेखा खींचते हैं और इसे एक आईडी कहते हैं curve।

CodePen पर ज्योफ ग्राहम (@geoffgraham) द्वारा पेन NgwPYB देखें।

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

कोड जेन पर ज्योफ ग्राहम (@geoffgraham) द्वारा पेन ज़ायोव देखें।

हम वास्तव में उस पाठ को देखना चाहते हैं। हम अपने पाठ को टैग में लपेट सकते हैं और इसे हमारे द्वारा पहले निर्धारित पथ आईडी पर कॉल करके अपने घुमावदार पथ की पंक्तियों का पालन करने के लिए सेट कर सकते हैं ।

CodePen पर ज्यॉफ ग्राहम (@geoffgraham) द्वारा पेन किक्वेप देखें।

अब हम गैस से खाना बना रहे हैं!

हम नहीं चाहते हैं कि वक्र दिखाई दे, इसलिए हम मार्ग को एक पारदर्शी भराव दें। हम CSS में भी ऐसा कर सकते हैं, लेकिन हम इस उदाहरण के लिए सीधे SVG मार्कअप में इनलाइन लागू कर रहे हैं।

कोड जेन पर ज्योफ ग्राहम (@geoffgraham) द्वारा पेन xrPbgx देखें।

बाकी सीएसएस है! सटीक फ़ॉन्ट आकार पाठ पर ही निर्भर करेगा और फ़ॉन्ट परिवार का क्या उपयोग किया जा रहा है लेकिन, एक बार जब आप सही संतुलन पर हमला करते हैं, तो एसवीजी स्वयं जवाबदेही को संभाल लेगा और किसी भी पैमाने पर वक्र पर सब कुछ सुनिश्चित करेगा।

CodePen पर ज्योफ ग्राहम (@geoffgraham) द्वारा एक घुमावदार रास्ते के साथ पेन एसवीजी टेक्स्ट देखें।

हम इस विधि को किसी भी प्रकार के घुमावदार पथ पर लागू कर सकते हैं।