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




svg adobe-illustrator (2)

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

<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>

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


अल्फा मान सेट करने का एक वैकल्पिक तरीका 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 फ़िल्टर आदिम शायद बेहतर विकल्प है।


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

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

#arrow-shadow {
	opacity:0.5;
}
g:hover #arrow-shadow {
	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">
	<defs>
		<filter id="dropshadow" height="130%">
			<feGaussianBlur in="SourceAlpha" stdDeviation="3" /> 
			<feOffset dx="2" dy="2" result="offsetblur" />
		</filter>
	</defs>
	<g fill="#EEE">
		<use id="arrow-shadow" xlink:href="#polygon" filter="url(#dropshadow)"></use>
		<polygon id="polygon"
				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"/>
		
	</g>
</svg>





svg-filters