एसवीजी धुंध फ़िल्टर एज कलाकृतियों

Question

जब मैं svg छवि में धुंध फ़िल्टर लागू करता हूं तो यह किनारों को धुंधला करता है ताकि वे थोड़ा पारदर्शी हो जाएं (बाएं नमूना देखें)। मैं जो चाहता हूं उसे इस तरह के आर्टिफैक्ट के बिना धुंधला करना है (सही नमूना देखें)। मैंने इसे हैक द्वारा हल किया: बस उसी फ़्लिप की गई छवि की प्रतिलिपि बनाकर उन्हें 4 पक्षों के लिए रखा।

क्या कोई बेहतर तरीका है?

ध्यान दें कि मैं केवल 5-10% पर छवि को बड़ा नहीं कर सकता; आकार मूल छवि के समान होना चाहिए।

यहाँ मेरी svg है:

... 
<filter id="blur"> 
<feGaussianBlur in="SourceGraphic" stdDeviation="4"></feGaussianBlur> 
</filter> 
... 
<g filter="url(#blur)"> 
    <image xlink:href="cathedral.jpg"></image> 
</g> 

Answer 1

यह एक कुरकुरा सीमा feComponentTransfer का उपयोग करता है 1.0 करने के लिए किनारों की अस्पष्टता को बढ़ाने के लिए होने के लिए एक अच्छा हैक है, लेकिन यह भी करने की आवश्यकता है फ़िल्टर किए गए तत्व के आकार में फ़िल्टर को फ़िल्टर करें (फिल्टर तत्व में फ़िल्टर आकार देने वाले विशेषताओं का उपयोग करके) - यदि आप ऐसा नहीं करते हैं, तो आपको मूल छवि के बाहर नए अपारदर्शी धुंध & काले पृष्ठभूमि स्पिलिंग का ओवरफ़्लो दिखाई देगा।

<filter id="blur" x="0%" 
y="0%" width="100%" height="100%"> 
<feGaussianBlur in="SourceGraphic" stdDeviation="4"/> 
    <feComponentTransfer> 
     <feFuncA type="discrete" tableValues="1 1"/> 
    </feComponentTransfer> 
</filter> 
... 
<g filter="url(#blur)"> 
    <image xlink:href="cathedral.jpg"></image> 
</g> 

आपको वर्ग में इनपुट की जरूरत नहीं है, तो आप "में" एक feComposite का उपयोग करने के बजाय फिल्टर आयामों का उपयोग कर से इनपुट के क्षेत्र में उत्पादन क्लिप की जरूरत है (मान लीजिए कि आपकी फोटो परिपत्र में है) । लेकिन feComposites अभी थोड़ा धीमा हैं और अभी तक एक सीएसएस फ़िल्टर के हिस्से के रूप में उपयोग नहीं किया जा सकता है, इसलिए उपरोक्त विधि वर्ग इनपुट के लिए बेहतर है।

ध्यान दें कि यह परिवर्तनीय अस्पष्टता/अल्फा चैनल वाली छवियों पर काम नहीं करेगा - यह सब कुछ 100% अस्पष्टता में परिवर्तित करेगा।