Muszę utworzyć pudełko z wstawionym cieniem, w taki sam sposób, w jaki CSS3 ma wbudowane cienie. Do tej pory znalazłem filtr z FeGaussianBlur, ale problem z tym polega na tym, że dodaje on cień poza ramką, czego nie chcę. Oto kod, który mam do tej pory:

<svg>
    <defs>
        <filter id="drop-shadow">
            <feGaussianBlur in="SourceAlpha" result="blur" stdDeviation="5" />
            <feGaussianBlur in="SourceAlpha" result="blur2" stdDeviation="10" />
            <feGaussianBlur in="SourceAlpha" result="blur3" stdDeviation="15" />
            <feMerge>
                <feMergeNode in="blur" mode="normal"/>
                <feMergeNode in="blur2" mode="normal"/>
                <feMergeNode in="blur3" mode="normal"/>
                <feMergeNode in="SourceGraphic" mode="normal"/>
            </feMerge>
        </filter>
    </defs>
    <rect x="10" y="10" width="100" height="100"
    stroke="black" stroke-width="4" fill="transparent" filter="url(#drop-shadow)"/>
</svg>

Zrobiłempróbny który również porównuje ten kod z pożądanym wynikiem CSS. Filtr nie powinien działać tylko na prostokątach, ale także na trapezach i bardziej skomplikowanych wielokątach.

Próbowałem już korzystać z radialGradient, ale ponieważ to sprawia, że ​​gradient okrężny też nie jest dobry.