एसवीजी भरें रंग पारदर्शिता / अल्फा?

416

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

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

— ओली ग्लास
स्रोत

किसी भी इच्छुक व्यक्ति के लिए, एक खाली भरणी पर क्लिक प्राप्त करने के लिए: “भरने: कोई नहीं” पर SVG का पता लगाने वाली घटनाओं पर क्लिक करें - यानी इसके fill="none"साथ उपयोग करने की संभावना pointer-events="visible"।

— फेबियन स्नूवर्ट

645

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

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

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

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

stroke-opacity स्ट्रोक के लिए विशेषता
opacity संपूर्ण वस्तु के लिए

— विलीहम टटलैंड
स्रोत

3

MDN अपने SVG Tutorial, developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/-

— t-mart

4

आप इन्हें स्टाइल विशेषता में भी डाल सकते हैं: <rect style = "fill: # 044B94; भरण-अपारदर्शिता: 0.4;" />

— पीटरवर्मोंट

उपरोक्त में, "भराव-अपारदर्शिता" और "स्ट्रोक-अपारदर्शिता" को "fill_opacity" और "stro_opacity" के साथ प्रतिस्थापित किया जाना चाहिए (यानी, हाइपरेंस को अंडरस्कोर के साथ बदलें)।

— मर्मदाद

1

@ गलत है कि गलत है; विनिर्देश देखें । कुछ भाषाओं में जो नामों को हाइफ़न रखने की अनुमति नहीं देती हैं, SVG के साथ काम करने के लिए लाइब्रेरीज़ जैसे नामों का उपयोग करती हैं fill_opacity, लेकिन SVG और CSS में fill-opacity।

— विलीह टोटलैंड

@WillihamTotland, सुधार के लिए धन्यवाद। मैं मानसिक रूप से सीधे कूद गया "मैं पायथन में svgwrite का उपयोग करके इसे कैसे लागू कर सकता हूं"। वहाँ आपको अंडरस्कोर के साथ हाइफ़न को बदलने की आवश्यकता है।

— मर्मदाद

78

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

यहाँ एक उदाहरण है ।

— एरिक डहलस्ट्रम
स्रोत

3

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

— विलीहम टटलैंड

10

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

— एरिक डहलस्ट्रम

7

जिक्र करना चाहते हैं, एक जगह जहां यह काम करने के लिए नहीं लगता है वह इनकस्केप में है

— जॉर्ज माउर

2

मैंने इस समाधान का उपयोग Highcharts पर किया, और इसने काम किया। यह परिवर्तित हो rgbaगया rgbऔर स्वचालित रूप से जुड़ गयाfill-opacity इसे करने के लिए विशेषता। मुझे यकीन नहीं है कि अगर यह सामान्य एसवीजी में भी काम करता है, लेकिन यह है कि यह वहां कैसे काम करता है। किसी भी तरह से, धन्यवाद।

— हन्ना

3

क्या मुझे कुछ स्पष्टीकरण मिल सकता है कि कौन से ब्राउज़र वास्तव में इनलाइन svgs में rgba का समर्थन करते हैं?

— लालनिमलवार

6

fill="#044B9466"

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

आप इस सिंटैक्स के लिए ब्राउज़र सहायता यहां पा सकते हैं: https://caniuse.com/#feat=css-rggggbbaa

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

— श्री-आईडीई
स्रोत

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

— मैरियोडियार

Qt SVG लाइब्रेरी (Qt 5.9.3) भी RGBA रंगों को अब तक न तो "# 00000000" हेक्स रूप में और न ही "rgba" के रूप में संभाल सकती है।

— bkausbk

2

भरण को पूरी तरह से पारदर्शी बनाने के लिए, fill="transparent"आधुनिक ब्राउज़रों में काम करने लगता है। लेकिन यह माइक्रोसॉफ्ट वर्ड (मैक के लिए) में काम नहीं करता था, मुझे इसका उपयोग करना था fill-opacity="0"।

— ब्रेट डोनाल्ड
स्रोत

के लिए इंकस्केप वेक्टर ग्राफिक्स संपादक 0.92.4.0 , fill="none"काम करता है, लेकिन fill="transparent"ऐसा नहीं करता।

— सैम

1

fill-opacityएसवीजी के अपने तत्व में विशेषता का उपयोग करें ।

डिफ़ॉल्ट मान 1 है, न्यूनतम 0 है, स्टेप उपयोग में दशमलव मान EX: 0.5 = 50% अल्फा है। नोट: fillआवेदन करने के लिए रंग को परिभाषित करना आवश्यक है fill-opacity।

मेरा उदाहरण देखें ।

संदर्भ ।

— डरलन डाइटरिच
स्रोत