13: एसवीजी एक आइकन सिस्टम के रूप में - `उपयोग` तत्व - सीएसएस-ट्रिक्स

Anonim

एसवीजी में एक बहुत ही शांत और शक्तिशाली तत्व होता है । यह अवधारणा में बहुत सरल है। यह आईडी द्वारा संदर्भित एसवीजी कोड का एक और बिट पाता है, और इसे तत्व के अंदर क्लोन करता है।

सबसे बुनियादी उपयोग का मामला होगा: मैंने पहले ही पृष्ठ पर एक बार इस आकृति (ओं) को खींच लिया है, और मैं इसे फिर से कहीं और आकर्षित करना चाहता हूं। उस आकार को प्राप्त करें, और इसे फिर से खींचें।

हम उस क्षमता को रूट ड्रम (ड्रमोल!) और संपूर्ण आइकन सिस्टम के रूप में उपयोग कर सकते हैं! हम उन सभी आकृतियों को ले सकते हैं जिन्हें हम एक बड़े एसवीजी ब्लॉक में पेज पर उपयोग करने का इरादा रखते हैं। हम उन सभी को एक टैग में लपेटेंगे जो कहने के लिए एक अर्थपूर्ण तरीका है "हम सिर्फ इन चीजों को परिभाषित कर रहे हैं जिसमें बाद में उपयोग करना है।" यह भी सुनिश्चित करें कि वे से नहीं चल पाएगी बनाता है (लेकिन आप यह भी चाहिए ही।display: none;

यह इस तरह काम करता है:

 

वह कायरता दिखने वाली xlink:hrefविशेषता कहीं और आईडी का संदर्भ देती है। यही कारण है कि आईडी एक तरह एक किसी भी आकार तत्व पर हो सकता है, या , या यह एक जैसे तत्वों के एक समूह पर हो सकता है

एक आइकन सिस्टम के मामले में सबसे अच्छा, यह एक तत्व पर हो सकता है । शब्दार्थिक रूप से सही होने के अलावा (एक चिह्न एक प्रतीक है, नहीं?), तत्व इसे स्वयं व्यूबॉक्स विशेषता और पहुँच जानकारी, जैसे और टैग ले जा सकता है । यह कार्यान्वयन को बहुत आसान बनाता है (जैसा कि ऊपर दिखाया गया है)।

तो आपको बस यह सुनिश्चित करने की आवश्यकता है कि यह दस्तावेज़ में कहीं और परिभाषित किया गया है:

 Basketball 

CodePen पर क्रिस कॉयर (@chriscoyier) द्वारा पेन जोमैड देखें।