SVG => रंग की

नामित रंग - भरने और स्ट्रोक विशेषताओं के लिए पूर्वनिर्धारित नामों का उपयोग करें

एसवीजी के लिए डब्ल्यू 3 सी सिफारिश में मान्यता प्राप्त रंग कीवर्ड नामों की एक सूची मिल सकती है।

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <circle r="30" cx="100" cy="100" fill="red" stroke="green" />
  <rect x="200" y="200" width="50" height="50" fill="yellow" stroke="blue" />
</svg>

हेक्साडेसिमल नोटेशन का उपयोग आरजीबी कलर्स

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <circle r="30" cx="100" cy="100" fill="#ff0000" stroke="#00ff00" />
  <rect x="200" y="200" width="50" height="50" fill="#ffff00" stroke="#00ffff" />
</svg>

शॉर्टहैंड हेक्साडेसिमल फॉर्म का उपयोग करने के लिए ऊपर के समान:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <circle r="30" cx="100" cy="100" fill="#f00" stroke="#0f0" />
  <rect x="200" y="200" width="50" height="50" fill="#ff0" stroke="#0ff" />
</svg>

कार्यात्मक संकेतन के साथ आरजीबी रंग - पूर्णांक मान या प्रतिशत

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <circle r="30" cx="100" cy="100" fill="rgb(255, 0, 0)" stroke="rgb(0, 255, 0)" />
  <rect x="200" y="200" width="50" height="50" fill="rgb(100%, 100%, 0%)" stroke="rgb(0%, 100%, 100%)" />
</svg>

कार्यात्मक संकेतन में, RGBA मान भी समर्थित हैं।

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <circle r="30" cx="100" cy="100" fill="rgba(255, 0, 0, 0.5)" stroke="rgba(0, 255, 0,5 0.5)" />
    <rect x="200" y="200" width="50" height="50" fill="rgba(100%, 100%, 0%, 0.5)" stroke="rgba(0, 100%, 100%, 0.5)" />
</svg>

करंट कीवर्ड

currentColor इनलाइन एसवीजी में सबसे उपयोगी है। इसके साथ आप माता-पिता को सीएसएस रंग विरासत में दे सकते हैं और एसवीजी में हर जगह रंगों का उपयोग किया जाता है।

इस उदाहरण में पहला सर्कल टेक्स्ट कलर को फिल कलर के रूप में उपयोग करता है, और दूसरा सर्कल स्ट्रोक कलर के रूप में उपयोग करता है।

<html>
    <head>
        div{color:green}
    </head>
    <body>
        <div>
            some Text
            <svg width="2em" height="1em" viewBox="0 0 200 100">
                <circle cx="50" cy="50" r="45" fill="currentColor"/>
                <circle cx="150" cy="50" r="45" fill="none" stroke-width=5 stroke="currentColor"/>
            </svg>
        </div>
    </body>
</html>

Modified text is an extract of the original Stack Overflow Documentation

के तहत लाइसेंस प्राप्त है CC BY-SA 3.0

से संबद्ध नहीं है Stack Overflow

SVG
रंग की

खोज…

नामित रंग - भरने और स्ट्रोक विशेषताओं के लिए पूर्वनिर्धारित नामों का उपयोग करें

हेक्साडेसिमल नोटेशन का उपयोग आरजीबी कलर्स

कार्यात्मक संकेतन के साथ आरजीबी रंग - पूर्णांक मान या प्रतिशत

करंट कीवर्ड