एक एसवीजी फ़िल्टर में अल्फा परत की अस्पष्टता को कैसे कम करें?

Question

मैं एक एसवीजी के रूप में लोगो बनाने की कोशिश कर रहा हूं। मैंने इलस्ट्रेटर से फाइल निर्यात की। लोगो पर एक ड्रॉप छाया है। मैं एक्सएमएल के माध्यम से देख रहा था और मैं फिल्टर नोड

<filter filterUnits="objectBoundingBox" width="200%" height="160%" x="-15%" y="-15%" id="AI_Shadow_2"> 
<feGaussianBlur stdDeviation="2" result="blur" in="SourceAlpha"></feGaussianBlur> 
<feOffset result="offsetBlurredAlpha" in="blur" dy="0" dx="0"></feOffset> 
<feMerge> 
    <feMergeNode in="offsetBlurredAlpha"></feMergeNode> 
    <feMergeNode in="SourceGraphic"></feMergeNode> 
</feMerge> 

वहाँ offsetBlurredAlpha के अल्फा उत्पन्न बदलने के लिए एक रास्ता है पाया? मैं नहीं चाहता कि यह शुद्ध काले रंग से शुरू हो जाए, मैं इसे 50% काला से शुरू करना चाहता हूं ताकि छाया प्रभाव वस्तु के चारों ओर पर्याप्त प्रकाश हो।

Answer 1

एक तरह से इस तरह आदिम एक feComponentTransfer फ़िल्टर जोड़ने के लिए, यह है:

<filter id="dropshadow"> 
    <feGaussianBlur in="SourceAlpha" stdDeviation="3"/> 
    <feOffset dx="2" dy="2"/> 
    <feComponentTransfer> 
    <feFuncA type="linear" slope="0.2"/> 
    </feComponentTransfer> 
    <feMerge> 
    <feMergeNode/> 
    <feMergeNode in="SourceGraphic"/> 
    </feMerge> 
</filter> 

एक लाइव उदाहरण here देखा जा सकता है।

Answer 2

एक तरीका है बस opacity: 0.5 का उपयोग करना है। ऐसा करने के लिए, ड्रॉप फ़िल्टर को शीर्ष पर मूल स्रोत के साथ विलय करने के बजाय, केवल ड्रॉपशैडो के लिए फ़िल्टर बनाएं, और इसे <use> टैग पर लागू करें जो स्रोत आकार का संदर्भ देता है।

इस दृष्टिकोण के अन्य फायदे हैं। उदाहरण के लिए, अब आप केवल छाया के लिए अलग स्टाइल लागू कर सकते हैं।

#arrow-shadow { 
 
\t opacity:0.5; 
 
} 
 
g:hover #arrow-shadow { 
 
\t opacity:0.7; 
 
}

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-50 -50 200 200" width="400px"> 
 
\t <defs> 
 
\t \t <filter id="dropshadow" height="130%"> 
 
\t \t \t <feGaussianBlur in="SourceAlpha" stdDeviation="3" /> 
 
\t \t \t <feOffset dx="2" dy="2" result="offsetblur" /> 
 
\t \t </filter> 
 
\t </defs> 
 
\t <g fill="#EEE"> 
 
\t \t <use id="arrow-shadow" xlink:href="#polygon" filter="url(#dropshadow)"></use> 
 
\t \t <polygon id="polygon" 
 
\t \t \t \t points="58.263,0.056 100,41.85 58.263,83.641 30.662,83.641 62.438,51.866 0,51.866 0,31.611 62.213,31.611 30.605,0 58.263,0.056"/> 
 
\t \t 
 
\t </g> 
 
</svg>

Answer 3

अल्फा मान सेट feColorMatrix फिल्टर आदिम उपयोग कर रहा है की एक वैकल्पिक तरीका। इसका उपयोग करके आप अल्फा मूल्य और एक ही समय में एक ड्रॉप छाया का रंग सेट कर सकते हैं।

नीचे दिया गया फ़िल्टर अल्फा मान को 0.2 से गुणा करता है और साथ ही ड्रॉप छाया का रंग लाल रंग में सेट करता है।

<filter id="dropshadow"> 
    <feGaussianBlur in="SourceAlpha" stdDeviation="3"/> 
    <feOffset dx="2" dy="2"/> 
    <feColorMatrix values="0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"/> 
    <feMerge> 
    <feMergeNode/> 
    <feMergeNode in="SourceGraphic"/> 
    </feMerge> 
</filter> 

लेकिन यदि आप केवल अल्फा मूल्य को बदलने की जरूरत, feComponentTransfer फिल्टर आदिम शायद बेहतर विकल्प है।