एसवीजी फिल्टर पर श्रृंखला में अगले लेख में, सारा सौइडन दिखाएगा कि कैसे टैडी मैच को सतह बनावट बनावट के लिए फिडिसप्लेमेंटमैप आदिम का उपयोग करके बनाना है।

लेखों की प्रस्तावित श्रृंखला, "एसवीजी फ़िल्टरिंग इफेक्ट्स", सारा सॉइदन द्वारा, फ्रीलांस यूआई / यूएक्स इंटरफ़ेस डेवलपर और लेबनान में स्थित कई तकनीकी लेखों के लेखक, एसवीजी फिल्टर के काम पर केंद्रित है और इसमें निम्नलिखित लेख शामिल हैं:

एसवीजी फ़िल्टरिंग प्रभाव

1. एसवीजी फ़िल्टरिंग प्रभाव। भाग 1. एसवीजी फिल्टर 101
2. एसवीजी फ़िल्टरिंग प्रभाव। भाग 2. feMorphology के साथ पाठ की रूपरेखा
3. एसवीजी फ़िल्टरिंग प्रभाव। भाग 3. feComponentTransfer का उपयोग करके छवि पोस्टराइजेशन प्रभाव
4. एसवीजी फ़िल्टरिंग प्रभाव। भाग 4. feComponentTransfer के साथ दो-रंग की छवियां ।
5. एसवीजी फ़िल्टरिंग प्रभाव। भाग 5. feDisplacementMap के साथ सतह बनावट के लिए पाठ का मिलान

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

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

बनावट बनावट की बनावट से मेल खाना: फोटोशॉप का रास्ता

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

फ़ोटोशॉप ट्यूटोरियल में, डिजाइनर ने तथाकथित विस्थापन मानचित्र का उपयोग करके यह प्रभाव बनाया। ऑफसेट मानचित्र एक छवि है जिसका रंग जानकारी किसी अन्य तत्व की सामग्री को विकृत करने के लिए उपयोग किया जाता है। पाठ प्रभाव बनाने के लिए, पाठ को गर्म करने के लिए छवि बनावट का उपयोग किया जाएगा ताकि यह बनावट के आकार से मेल खाए।

फ़ोटोशॉप में, सतह पाठ से मिलान करने के लिए, डिजाइनर ने निम्नलिखित क्रियाएं कीं:

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

पाठ को ऑफसेट करने के लिए उपयोग करने से पहले दूसरे चरण में विस्थापन मानचित्र की छवि धुंधली हो जाती है, क्योंकि यदि छवि में बहुत अधिक या बहुत कम विवरण है, तो परिणामी प्रभाव कम यथार्थवादी दिखाई देगा। आमतौर पर विस्तार की एक औसत राशि प्राप्त करने के लिए 2px छवि धुंधला पर्याप्त है, जो निश्चित रूप से पर्याप्त है।

यदि आप इस श्रृंखला के पिछले लेखों को पढ़ते हैं, तो आप जानते हैं कि SVG फ़िल्टरिंग प्राइमेटिव्स का उपयोग करके प्रभाव बनाने या फिर से बनाने के लिए चरण-दर-चरण सोच महत्वपूर्ण है। और आपने पहले ही यह पता लगा लिया होगा कि एसवीजी फ़िल्टरिंग प्राइमेटिक्स का उपयोग करके इन चरणों में से कुछ को कैसे पुन: पेश किया जाए, जिनमें से कुछ हमने पिछले लेखों में शामिल किए हैं।

लेकिन इस आशय का सबसे महत्वपूर्ण कदम विस्थापन मानचित्र बनाना और लागू करना है। हम इसे एसवीजी में कैसे बना सकते हैं?

एसवीजी में सतह की बनावट के लिए पाठ का मिलान करें

ऊपर दिए गए फ़ोटोशॉप ट्यूटोरियल से प्रभाव को फिर से बनाने के लिए, हमें पहले एक विस्थापन मानचित्र बनाने की आवश्यकता है। SVG में, feDisplacementMap आदिम का उपयोग विस्थापन मानचित्र का उपयोग करके सामग्री को ऑफसेट करने के लिए किया जाता है।

feDisplacementMap एक परिणाम प्राप्त करने के लिए दो इनपुट लेता है। सामग्री को ऑफसेट करने के लिए आप जिस छवि का उपयोग करना चाहते हैं, वह in2 विशेषता में निर्दिष्ट है। विशेषता में इनपुट के लिए आरक्षित है, जिस पर आप ऑफसेट प्रभाव को लागू करना चाहते हैं।

और अन्य सभी प्राथमिकताओं के साथ, feDisplacementMap पर इनपुट कुछ भी हो सकता है, अपने स्वयं के ग्राफिक्स स्रोत ( SourceGraphic ) से शुरू होकर, दूसरे फ़िल्टरिंग ऑपरेशन के परिणाम के लिए। चूंकि हम विस्थापन मानचित्र को अपने पाठ स्रोत पर लागू करना चाहते हैं, इसका मतलब है कि विशेषता में मूल्य के रूप में सोर्सग्राफिक होगा।

तो, चलो SVG फ़िल्टर प्राइमेट के साथ फ़ोटोशॉप के लिए मैन्युअल चरणों को फिर से बनाएँ। एसवीजी में बनावट से मेल खाने की प्रक्रिया बहुत कुछ वैसी ही है जैसी हमने फोटोशॉप में देखी थी। मैं प्रत्येक चरण पर विस्तार से ध्यान दूंगा।

• हमें एक ऐसी छवि मिलती है, जिसका उपयोग फैमीज के उपयोग से बनावट के रूप में किया जाएगा।
• FeColorMatrix के साथ छवि का वर्णन करें ।
• FeGaussianBlur का उपयोग करके छवि पर एक 0.5px गाऊसी धुंधला लागू करें।
• FeDisplacementMap का उपयोग करके पाठ को ताना देने के लिए एक छवि का उपयोग करें ।
• FeBlend का उपयोग करके पृष्ठभूमि छवि के साथ पाठ को मिलाएं और उस पर पारदर्शिता प्रभाव लागू करें (हम feComponentTransfer के साथ अस्पष्टता को कम कर देंगे)।
• इसके पीछे पाठ और छवि को प्रदर्शित करें, दो परतों को मिलाकर feMerge का उपयोग करें ।

फ़िल्टरिंग आदिम फ़ाइमैज छवि तत्व का एक फिल्टर संस्करण है और इसमें उसी तरह के गुण हैं। इसलिए, फ़िल्टर क्षेत्र में छवि को प्रस्तुत करने के लिए, हम feImage का उपयोग करेंगे । छवि प्राप्त करने के बाद, हम इसे अन्य फ़िल्टरिंग कार्यों के लिए इनपुट के रूप में उपयोग कर सकते हैं। इसे फेल करने के लिए feColorMatrix ऑपरेशन में लोड करने के लिए इसका उपयोग किया जाएगा।

हमने पहले भी feColorMatrix आदिम का वर्णन किया है, लेकिन यह उल्लेख नहीं किया है कि यह कई खोजशब्दों के साथ आता है जो पूर्वनिर्धारित मेट्रिक्स के शॉर्टकट हैं। हमेशा मैट्रिक्स को इनपुट के रूप में प्रदान करने के बजाय, आप संभावित कुंजियों में से एक का उपयोग करके टाइप विशेषता को बदल सकते हैं:

matrix | saturate | hueRotate | luminanceToAlpha 

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

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

तो, चलिए हमारे चरणों का अनुवाद कोड में करना शुरू करते हैं:

 <!-- I'm extending the filter region just to increase its area for visual purposes. This is not required or needed for the effect to work.--> <filter id="conform" x="-50%" y="-50%" width="200%" height="200%"> <!-- Get the image. --> <feImage xlink:href="..." x="0" y="0" width="100%" height="100%" preserveAspectRatio="none"></feImage> <!-- Desaturate the image. --> <feColorMatrix type="saturate" values="0" result="IMAGE"/> <!-- ... --> 

फिलहाल, हमारा फ़िल्टर क्षेत्र निम्नानुसार है:

Ris_1। मलिनकिरण के बाद मूल छवि।

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

 <!-- I'm extending the filter region just to increase its area for visual purposes. This is not required or needed for the effect to work.--> <filter id="conform" x="-50%" y="-50%" width="200%" height="200%"> <!-- Get the image. --> <feImage xlink:href="..." x="0" y="0" width="100%" height="100%" preserveAspectRatio="none"></feImage> <!-- Desaturate the image. --> <feColorMatrix type="saturate" values="0" result="IMAGE"/> <!-- decrease level of details so the effect on text is more realistic --> <feGaussianBlur in="IMAGE" stdDeviation="0.25" result="MAP"></feGaussianBlur> <!-- ... --> 

और हमारा विस्थापन मानचित्र अब इस तरह दिखता है:

Ris_2। विस्थापन का नक्शा देखें।

FeDisplacementMap का उपयोग करते हुए , अब हम अपने विस्थापन मानचित्र का उपयोग करके पाठ को विकृत कर सकते हैं:

 <!-- I'm extending the filter region just to increase its area for visual purposes. This is not required or needed for the effect to work.--> <filter id="conform" x="-50%" y="-50%" width="200%" height="200%"> <!-- Get the image. --> <feImage xlink:href="..." x="0" y="0" width="100%" height="100%" preserveAspectRatio="none"></feImage> <!-- Desaturate the image. --> <feColorMatrix type="saturate" values="0" result="IMAGE"/> <!-- decrease level of details so the effect on text is more realistic --> <feGaussianBlur in="IMAGE" stdDeviation="0.25" result="MAP"></feGaussianBlur> <!-- Use the displacement map to distort the source text --> <feDisplacementMap in="SourceGraphic" in2="MAP" scale="15" xChannelSelector="R" yChannelSelector="R" result="TEXTURED_TEXT"></feDisplacementMap> <!-- ... --> 

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

Ris_3। विकृत पाठ प्रदर्शित करें।

आप पहले से ही देख सकते हैं कि टेक्स्ट के किनारों के चारों ओर कपड़े की बनावट कैसी है। यह महान है।

फ़ोटोशॉप के लिए मैनुअल के रूप में, हम फिर से feImage का उपयोग करके पाठ द्वारा छवि को फिर से परिभाषित करेंगे :

 <!-- I'm extending the filter region just to increase its area for visual purposes. This is not required or needed for the effect to work.--> <filter id="conform" x="-50%" y="-50%" width="200%" height="200%"> <!-- Get the image. --> <feImage xlink:href="..." x="0" y="0" width="100%" height="100%" preserveAspectRatio="none"></feImage> <!-- Desaturate the image. --> <feColorMatrix type="saturate" values="0" result="IMAGE"/> <!-- decrease level of details so the effect on text is more realistic --> <feGaussianBlur in="IMAGE" stdDeviation="0.25" result="MAP"></feGaussianBlur> <!-- Use the displacement map to distort the source text --> <feDisplacementMap in="SourceGraphic" in2="MAP" scale="15" xChannelSelector="R" yChannelSelector="R" result="TEXTURED_TEXT"></feDisplacementMap> <!-- Re-display the image as a background image --> <feImage xlink:href="..." x="0" y="0" width="100%" height="100%" preserveAspectRatio="none" result="BG"></feImage> <!-- ... --> 

अंत में, हम प्रभाव को सुधारने के लिए पाठ को पृष्ठभूमि के साथ मिलाना चाहते हैं। हम feColorMatrix के साथ पाठ की अस्पष्टता को 0.9 तक कम कर देंगे, और फिर पृष्ठभूमि के साथ मिश्रण करने के लिए पाठ के लिए feBlend आदिम लागू करें।

CSS Blend Modes की तरह , हमारे पास 16 ब्लेंडिंग मोड्स का विकल्प है। गुणा मोड हमारे प्रभाव के लिए उपयुक्त है। फ़ोटोशॉप के लिए मैनुअल में, डिजाइनर ने एक रैखिक रिकॉर्डिंग का उपयोग किया, जो एसवीजी / सीएसएस में उपलब्ध नहीं है।

feBlend मिश्रण के लिए दो इनपुट स्वीकार करेगा: पाठ और पृष्ठभूमि छवि:

 <!-- I'm extending the filter region just to increase its area for visual purposes. This is not required or needed for the effect to work.--> <filter id="conform" x="-50%" y="-50%" width="200%" height="200%"> <!-- Get the image. --> <feImage xlink:href="..." x="0" y="0" width="100%" height="100%" preserveAspectRatio="none"></feImage> <!-- Desaturate the image. --> <feColorMatrix type="saturate" values="0" result="IMAGE"/> <feGaussianBlur in="IMAGE" stdDeviation="0.25" result="MAP"></feGaussianBlur> <!-- Use the displacement map to distort the source text --> <feDisplacementMap in="SourceGraphic" in2="MAP" scale="15" xChannelSelector="R" yChannelSelector="R" result="TEXTURED_TEXT"></feDisplacementMap> <!----> <feImage xlink:href="..." x="0" y="0" width="100%" height="100%" preserveAspectRatio="none" result="BG"></feImage> <!-- Reduce the opacity of the text --> <feColorMatrix in="Textured_Text" result="Textured_Text_2" type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 .9 0" /> <!-- Blend the text with the background --> <feBlend in="BG" in2="Textured_Text_2" mode="multiply" result="BLENDED_TEXT"></feBlend> <!-- ... --> 

और अंत में, लेकिन मूल्य से नहीं, हम feM का उपयोग करके पृष्ठभूमि छवि परत के शीर्ष पर मिश्रित पाठ की एक नई परत को ओवरले करेंगे:

 <!-- I'm extending the filter region just to increase its area for visual purposes. This is not required or needed for the effect to work.--> <filter id="conform" x="-50%" y="-50%" width="200%" height="200%"> <!-- Get the image. --> <feImage xlink:href="..." x="0" y="0" width="100%" height="100%" preserveAspectRatio="none"></feImage> <!-- Desaturate the image. --> <feColorMatrix type="saturate" values="0" result="IMAGE"/> <!-- decrease level of details so the effect on text is more realistic --> <feGaussianBlur in="IMAGE" stdDeviation="0.25" result="MAP"></feGaussianBlur> <!-- Use the displacement map to distort the source text --> <feDisplacementMap in="SourceGraphic" in2="MAP" scale="15" xChannelSelector="R" yChannelSelector="R" result="TEXTURED_TEXT"></feDisplacementMap> <!----> <feImage xlink:href="..." x="0" y="0" width="100%" height="100%" preserveAspectRatio="none" result="BG"></feImage> <!-- Reduce the opacity of the text --> <feColorMatrix in="Textured_Text" result="Textured_Text_2" type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 .9 0" /> <!-- Blend the text with the background --> <feBlend in="BG" in2="Textured_Text_2" mode="multiply" result="BLENDED_TEXT"></feBlend> <!-- Layer the text on top of the background image --> <feMerge> <feMergeNode in="BG"></feMergeNode> <feMergeNode in="BLENDED_TEXT"></feMergeNode> </feMerge> </filter> <text dx="60" dy="200" font-size="10em" font-weight="bold" filter="url(#conform)" fill="#00826C"> organic </text> 

और यहाँ हमारा अंतिम परिणाम है:

Ris_4। अंतिम परिणाम।

एसवीजी में ऑफसेट मैप्स का उपयोग करने पर नोट्स

FeDisplacementMap तत्व में तीन विशेषताएं हैं जो यह निर्धारित करती हैं कि विस्थापन मानचित्र मूल ग्राफिक्स को कैसे प्रभावित करता है:

• xChannelSelector : क्षैतिज ऑफसेट के लिए उपयोग करने के लिए in2 से कौन सा रंग चैनल (R / G / B / A) इंगित करता है;
• yChannelSelector : इंगित करता है कि कौन सा रंग चैनल (R / G / B / A) in2 से ऊर्ध्वाधर ऑफसेट के लिए उपयोग करता है;
• पैमाना : छवि विरूपण की मात्रा निर्धारित करता है। पैमाने जितना अधिक होगा, विरूपण प्रभाव उतना ही मजबूत होगा। वांछित परिणाम प्राप्त करने के लिए आप शायद इस मूल्य के साथ प्रयोग करेंगे।

शायद एसवीजी फिल्टर में सामग्री को ऑफसेट करने के लिए छवियों का उपयोग करते समय सबसे महत्वपूर्ण बात यह है कि छवि और सामग्री को कोर नियमों के अधीन है। सुनिश्चित करें कि आप उसी स्रोत से छवि और सामग्री परोस रहे हैं ताकि ब्राउज़र ऑफ़सेट ऑपरेशन को छोड़ न दे।

आप छवि को फ़िल्टर में ( feImage में ) भी एम्बेड कर सकते हैं और इसे विस्थापन मानचित्र के रूप में उपयोग कर सकते हैं। गैबी का यह पेन एक महान उदाहरण है जो मूल छवि को विकृत करने के लिए अंतर्निहित एसवीजी पैटर्न का उपयोग करता है। रिपल जैसे प्रभाव को बनाने वाला यह गोलाकार पैटर्न मेरा पसंदीदा है।

स्रोत में रूपांतरण लागू करना

इस प्रभाव के लिए हमने जो फ़ोटोशॉप ट्यूटोरियल का उपयोग किया है, उसमें डिज़ाइनर टेक्स्ट के लिए एक रोटेशन ट्रांसफॉर्मेशन लागू करता है, जो समग्र प्रभाव के लिए एक अच्छा स्पर्श जोड़ता है।

यदि आप एक रोटेशन परिवर्तन लागू करते हैं <text> जिस पर फ़िल्टर लागू किया गया है, तो पूरे फ़िल्टरिंग क्षेत्र को घुमाया जाएगा, जिसमें पृष्ठभूमि पृष्ठभूमि शामिल है:

Ris_5। रोटेशन को लागू करने के बाद छवि को देखें, जबकि पृष्ठभूमि बदल गई।

यह भी होता है अगर अन्य शैलियों को स्रोत पाठ पर लागू किया जाता है। उदाहरण के लिए, यदि आप अपारदर्शिता पैरामीटर <text> को 0.5 पर सेट करते हैं, तो यह पाठ और पृष्ठभूमि छवि को भी प्रभावित करेगा।

पाठ को घुमाने के लिए, लेकिन फ़िल्टरिंग क्षेत्र के बाकी हिस्सों को नहीं, हम पाठ को एक समूह ( <g> ) में लपेट सकते हैं और इस समूह के लिए एक फ़िल्टर लागू कर सकते हैं, और फिर पाठ में रोटेशन परिवर्तन लागू कर सकते हैं। यह सुनिश्चित करता है कि केवल पाठ को घुमाया जाए, जबकि शेष फ़िल्टरिंग क्षेत्र, जिसे अब लिपटे समूह द्वारा परिभाषित किया गया है, परिवर्तन से अप्रभावित रहता है। यह विधि अमीलिया बेलामी-रॉयड्स द्वारा दी गई है।

 <g filter="url(#conform)"> <text dx="60" dy="200" font-size="10em" transform="translate(-20 30) rotate(-7)" fill="#00826C">organic</text> </g> 

मैंने यह सुनिश्चित करने के लिए कि पाठ फ़िल्टरिंग क्षेत्र पर केंद्रित रहता है, यह सुनिश्चित करने के लिए किलों को जोड़कर परिवर्तन को थोड़ा बदल दिया। इस परिवर्तन का परिणाम अब इस तरह दिखता है:

Ris_6। पाठ को केंद्र में रखने के लिए रिकाउंट के साथ कनवर्ट करें।

कृपया ध्यान दें कि मैं एसवीजी ट्रांस्फ़ॉर्म विशेषता का उपयोग करके पाठ में रोटेशन परिवर्तन लागू करता हूं, सीएसएस नहीं, क्योंकि इस लेखन के समय, इंटरनेट एक्सप्लोरर और एमएसडेज एसवीजी तत्वों में सीएसएस परिवर्तनों का समर्थन नहीं करते हैं।

असली डेमो

यह पाठ पक्षपातपूर्ण प्रभाव वर्तमान में MSEdge सहित सभी प्रमुख ब्राउज़रों में काम करता है। नीचे MSEdge में प्रभाव का एक स्क्रीनशॉट है:

Ris_7। MSEdge में टेक्स्ट प्रोसेसिंग कैसा दिखता है।

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

Ris_8। वर्तमान पाठ विरूपण प्रभाव क्रोम में कैसा दिखता है।

आप यहां डेमो देख सकते हैं ।

निष्कर्ष

मुझे आशा है कि आप पहले से ही एसवीजी फ़िल्टर की शक्ति का आनंद लेना शुरू कर रहे हैं और बहुत सी विशेषताओं और प्रभावों के बारे में सोच रहे हैं जो आप उनके साथ बना सकते हैं।

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

अगले लेख में, हम सीखेंगे कि एसवीजी द्वारा उत्पन्न शोर और प्रकाश प्रभावों के संयोजन का उपयोग करके एक सरल बनावट कैसे बनाई जाए। हमारे साथ रहो।