如何实现类似Illustrator的SVG黑白矩形混合效果？

我正在尝试混合一个白色填充矩形和一个黑色填充矩形，目前的实现效果与预期完全不符。查阅多篇论坛帖子未找到解决方案，恳请提供相关指引或帮助。

已尝试的初始方案 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rect transition</title>
</head>
<body>
    <svg width="400" height="400" xmlns="http://www.w3.org/2000/svg">        
        <defs>
            <filter id="blurFilter">                
                <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
            </filter>
        </defs>
                
        <rect x="10" y="10" width="1in" height="0.5in" fill="white" filter="url(#blurFilter)" />                
        <rect x="20" y="20" width="1in" height="0.5in" fill="black" filter="url(#blurFilter)" />
    </svg>
</body>
</html>

预期效果 #

最新尝试（仍未达到预期） #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Another try</title>
</head>
<body>
    <svg width="500" height="300" xmlns="http://www.w3.org/2000/svg">        
        <defs>
            <linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="100%">
                <stop offset="0%" style="stop-color:white; stop-opacity:1" />
                <stop offset="100%" style="stop-color:black; stop-opacity:1" />
            </linearGradient>            
            <filter id="blurFilter" x="0" y="0" width="200%" height="200%">                
                <feGaussianBlur stdDeviation="8" />
            </filter>
        </defs>                
        <rect x="50" y="100" width="80" height="40" fill="white" />                
        <rect x="150" y="125" width="120" height="60" fill="url(#grad)" filter="url(#blurFilter)" />                    
        <rect x="250" y="150" width="160" height="80" fill="black" />
    </svg>
</body>
</html>

内容的提问来源于stack exchange，提问作者Karl Schneider