2011-05-18 13 views
309

क्या एसवीजी भरने वाले रंगों पर पारदर्शिता या अल्फा स्तर सेट करना संभव है?एसवीजी रंग पारदर्शिता/अल्फा भरें?

मैंने भरने के टैग में दो मान जोड़ने की कोशिश की है (इसे भरने से = "# 044B94" भरने के लिए = "# 044B9466"), लेकिन यह काम नहीं करता है।

उत्तर

483

आप एक अतिरिक्त गुण का उपयोग करते हैं; fill-opacity: यह विशेषता 0.0 और 1.0 के बीच एक दशमलव संख्या लेती है, समावेशी; जहां 0.0 पूरी तरह से पारदर्शी है।

उदाहरण के लिए:

<rect ... fill="#044B94" fill-opacity="0.4"/> 

इसके अलावा आपको निम्नलिखित है: स्ट्रोक

  • opacity के लिए

    • stroke-opacity विशेषता संपूर्ण वस्तु
  • +3

    एमडीएन इस एसवीजी ट्यूटोरियल में इस और अन्य संबंधित विशेषताओं का एक अच्छा अवलोकन प्रदान करता है, https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Fills_and_Strokes –

    +3

    आप इन्हें भी डाल सकते हैं स्टाइल विशेषता: PeterVermont

    64

    एक के रूप में के लिए अभी तक नहीं पूरी तरह से मानकीकृत समाधान (यद्यपि संरेखण डब्ल्यू में CSS3 में रंग वाक्यविन्यास के साथ) आप उदाहरण fill="rgba(124,240,10,0.5)" का उपयोग कर सकते हैं। फ़ायरफ़ॉक्स, ओपेरा, क्रोम में ठीक काम करता है।

    Here's an example

    +3

    http://www.w3.org/TR/SVG/painting.html#FillProperties पर देख रहे हैं (भरने-अस्पष्टता के लिए थोड़ा नीचे स्क्रॉल करें); यह मेरे लिए पूरी तरह से मानकीकृत दिखता है। –

    +8

    @ विल्लियम: हाँ भरने की अस्पष्टता एसवीजी सिफारिश में है, और इसका उपयोग करने में कोई समस्या नहीं है। CSS3 वाक्यविन्यास CSS3 रंग में है, जो w3c अनुशंसा बनने से एक कदम दूर है। एसवीजी 1.1 CSS3 रंग का संदर्भ नहीं देता है क्योंकि यह उस समय उपलब्ध नहीं था, शायद एसवीजी का भविष्य संस्करण होगा। –

    +0

    आह। ऐसा लगता है कि "आपका कोई पूर्ण मानकीकृत समाधान नहीं है, लेकिन: ..."; जो गलत होगा। फिर भी; आरजीबीए() का उपयोग करते समय एक प्रकार का व्यर्थ लगता है जब आपके पास समायोजित करने के लिए एक मुक्त खड़े अस्पष्टता मूल्य होता है। –

    1
    fill="#044B9466" 
    

    यह एसवीजी के अंदर एक RGBA color स मान के साथ परिभाषित करता है। यह मान्य है, लेकिन सभी प्रोग्राम इसे ठीक से प्रदर्शित नहीं कर सकते हैं ...

    अगस्त 2017 तक: आरजीबीए भरने वाले रंग मोज़िला फ़ायरफ़ॉक्स (54), ऐप्पल सफारी (10.1) और मैक ओएस एक्स फाइंडर के "त्वरित दृश्य पर ठीक से प्रदर्शित होंगे "। हालांकि Google क्रोम (60.0) इस रंग को ठीक से प्रदर्शित नहीं करता है; यह सिर्फ इसे काले रंग के रूप में प्रदर्शित करेगा।

    +0

    क्या आप जानते हैं कि उन्होंने हाल ही में कुछ बदल दिया है? मेरे पास एक काम कर रहे क्रोम एप्लिकेशन थे जो भरते थे: आरजीबी (...) और अब यह पूरी तरह टूटा हुआ है। मैं तुम्हारी मदद की सराहना करता हूँ! – Mariodiar

    +0

    क्यूटी एसवीजी लाइब्रेरी (क्यूटी 5.9.3) अब भी आरजीबीए रंगों को संभाल नहीं सकती है न तो "# 00000000" हेक्स फॉर्म और न ही "आरजीबीए" के रूप में। – bkausbk

    संबंधित मुद्दे