具有 feGaussianBlur stdDeviation 的 SVG 形状无法在 google chrome 上正确呈现

Question

所以我在图像上使用 SVG 遮罩来制作边缘模糊的椭圆，有一段时间它在所有浏览器上看起来都是正确的，但随机地，svg 上的模糊效果在 chrome 上看起来确实不对和 Microsoft Edge，我无法弄清楚为什么会发生或解决问题。我正在使用 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>

SVG in Firefox

SVG in Chrome

Answer 1

Chrome 中的蒙版和滤镜之间似乎存在交互错误。您可以通过使用 feComposite 在滤镜内部制作遮罩并反转遮罩和图像的顺序来避免这种情况：使用 feImage 将图像拉入滤镜，然后使用 SourceGraphic 定义遮罩。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400px" height="350px" >
  <defs>
    <filter id="myfilter" filterUnits="userSpaceOnUse" x="0" y="0" width="400" height="350">
      <feGaussianBlur stdDeviation="20" result="reverse-mask"/>
      <feImage x="0" y="0" width="400"
 height="350"  preserveAspectRatio="none" xlink:href="https://upload.wikimedia.org/wikipedia/commons/thumb/2/23/Wilsons_Promontory_National_Park_%28AU%29%2C_Big_Drift_--_2019_--_1683.jpg/1280px-Wilsons_Promontory_National_Park_%28AU%29%2C_Big_Drift_--_2019_--_1683.jpg"/>
      <feComposite operator="in" in2="reverse-mask"/>
    </filter>
      </defs>
  
      <g filter="url(#myfilter)">
      <ellipse cx="50%" cy="50%" rx="35%" ry="35%" fill="white" />
      </g>

 </svg>

(p.s。post 使用图像 URL 完成独立的工作代码是个好主意 - 例如，如果 CSS 类不相关 - 删除它们。）

具有 feGaussianBlur stdDeviation 的 SVG 形状无法在 google chrome 上正确呈现

SVG shapes with feGaussianBlur stdDeviation not rendering correctly on google chrome

html

svg

google-chrome

image

mask