स्टाइलिंग एसवीजी ग्राफिक्स

हम एसवीजी ग्राफिक्स का अध्ययन करना जारी रखते हैं, इस बार हम शैलीकरण पर स्पर्श करेंगे।
भाग एक: एसवीजी ग्राफिक्स का परिचय ।



नमूनों / डाउनलोड स्रोत का प्रदर्शन

एसवीजी तत्वों की उपस्थिति को बदलना HTML के समान है, जिसमें कुछ विशेषताएं हैं। उदाहरण के लिए, पृष्ठभूमि को भरण संपत्ति द्वारा सौंपा गया है, न कि पृष्ठभूमि-रंग द्वारा, सीमा के बजाय सीमा स्ट्रोक है । यदि आपने एडोब इलस्ट्रेटर के साथ काम किया है, तो समान शब्दावली परिचित होगी।




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

<svg> <rect width="200" height="200" fill="slategrey" stroke="black" stroke-width="3"/> </svg> 

इसके अलावा, गुणों को एक शैली के रूप में जोड़ा जा सकता है। उदाहरण में, CSS3 की परिवर्तन संपत्ति को भरने और स्ट्रोक करने के लिए जोड़ा गया था:

 <svg> <rect x="203" width="200" height="200" style="fill:slategrey; stroke:black; stroke-width:3; -webkit-transform: rotate(45deg);"/> </svg> 

चूंकि SVG XML मार्कअप पर आधारित है, .svg दस्तावेज़ में शैली CDATA में संलग्न होनी चाहिए, अन्यथा डिज़ाइन XML पार्सर के साथ संघर्ष करेगा। उदाहरण में, एक हॉवर प्रभाव जोड़ा गया है:

 <style type="text/css" media="screen"> <![CDATA[ #internal rect { fill: slategrey; stroke: black; stroke-width: 3; -webkit-transition: all 350ms; } #internal rect:hover { fill: green; } ]]> </style> 

.Svg दस्तावेज़ में, बाहरी शैलियों को थोड़े अलग तरीके से जोड़ा जाता है:

 <?xml-stylesheet type="text/css" href="style.css"?> 

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

 <g style="fill:slategrey; stroke:black; stroke-width:3; fill-opacity: 0.5;"> <rect x="203" width="200" height="200"/> <circle cx="120" cy="106" r="100"/> </g> 

यह एसवीजी स्टाइलिंग के सभी मुख्य आकर्षण हैं। एक बोनस थोड़ा उपयोगी पढ़ना है:

• आधिकारिक शैली की जानकारी w3.org पर
• अच्छा alignleft.com ब्लॉग उदाहरण
• Hongkiat.com पर मूल उदाहरण