我需要製作一個帶有內嵌陰影的盒子，就像 CSS3 具有內嵌盒子陰影一樣。到目前為止我發現的是一個帶有 feGaussianBlur 的濾鏡，但問題是它還在框架外添加了陰影，這是我不想要的。這是我到目前為止得到的程式碼：

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

我製作了一個演示，並將此程式碼與所需的 CSS 製作結果進行比較。此濾鏡不僅適用於矩形，也適用於梯形和更複雜的多邊形。

我已經嘗試過使用 RadialGradient，但由於這會使漸變變成圓形，所以這也不好。