Warm tip: This article is reproduced from serverfault.com, please click

SVG shapes with feGaussianBlur stdDeviation not rendering correctly on google chrome

发布于 2020-12-21 17:37:09

So I am using an SVG mask on an image to make a blurry edged ellipse and for a while it was looking right on all browsers but then randomly the blurry effect on the svg looked really wrong on chrome and microsoft edge and I cannot figure out why it is happening or resolve the issue. I'm using the feGaussianBlur stdDeviation tags to give it the blurry edges and they apparently are doing different things on each browser. (firefox is how it supposed to be looking like). Someone please guide me in the right direction :)

Here is the code I'm using to make the masked image

<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

Questioner
Mark Btesh
Viewed
0
Michael Mullany 2021-01-05 07:51:32

There seems to be an interaction bug between the mask and the filter in Chrome. You can avoid this by doing the mask inside the filter using feComposite and reversing the order of mask and image: pull in the image to the filter using feImage, and use the SourceGraphic to define the mask.

<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. it's a good idea to post complete self-contained working code with an image URL that works - e.g. if the CSS classes are not relevant - remove them.)