32: SVG और HTML तत्वों पर SVG फ़िल्टर - सीएसएस-ट्रिक्स

Anonim

शायद आपने सीएसएस फिल्टर के बारे में सुना है? आप उन्हें सीएसएस से किसी भी तत्व को लागू कर सकते हैं, जैसे:

.apply-css-filter ( -webkit-filter: grayscale(0.5); filter: grayscale(0.5); )

तुम भी एक HTML तत्व या एक SVG तत्व के लिए आवेदन कर सकते हैं।

लेकिन ऐसे फिल्टर भी हैं जिन्हें आप एसवीजी के भीतर परिभाषित कर सकते हैं, और जब आप करते हैं तो अधिक विकल्प होते हैं। यहाँ एक उदाहरण परिभाषा है:

 

फिर आप इसे SVG में एक तत्व पर लागू कर सकते हैं जैसे:

 

या, सीएसएस से आईडी को इसी तरह संदर्भित करके:

.apply-svg-filter ( -webkit-filter: url(#pictureFilter); filter: url(#pictureFilter); )

बहुत सारे एसवीजी फिल्टर हैं। धुंधला जैसे परिचित, और अजीब लोग जो चित्रकार प्रभाव लागू करते हैं। यहाँ कल्पना है।