所以我在图像上使用了SVG蒙版，使边缘的椭圆变得模糊，有一段时间它在所有浏览器上看起来都是正确的，但随后在svg上的模糊效果在chrome和microsoft边缘上看起来确实是错误的，我不知道为什么它正在发生或解决了问题。我正在使用feGaussianBlur stdDeviation标记为其提供模糊的边缘，并且它们显然在每个浏览器上都执行不同的操作。（Firefox看起来应该是这样）。有人请指引我正确的方向:)

这是我用来制作遮罩图像的代码

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400px" height="350px" class="rotating">
  <defs>
    <filter id="filter">
      <feGaussianBlur stdDeviation="20" />
    </filter>
    <mask id="mask">
      <ellipse cx="50%" cy="50%" rx="35%" ry="35%" fill="white" filter="url(#filter)"></ellipse>
    </mask>
  </defs>
                
                <image class="homepage-header-image " xlink:href="http://legendbranding.com/wp-content/uploads/2020/11/cropped-ryan-plomp-0iPebSCgKoA-unsplash-3.jpg" mask="url(#mask)"></image>
                </svg>
            </div>



<script>
     .header-description.media-on-right img.homepage-header-image {
        float: right;
      }
</script>

Firefox中的SVG

Chrome中的SVG