CODEWITHSUNDEEP
firefoxsvg
foobarbecue
foobarbecue

Reputation: 7060

SVG filter causing unexpected cropping on Firefox

I'm using an svg <pattern> with an <image> that references a <filter>. My image will be scaled down to fit using preserveAspectRatio. It works as expected on Chrome, and Edge, but on Firefox the <filter> tag causes the image to be unexpectedly cropped. I have tried many different ways of defining coordinates to attempt to avoid this problem but so far haven't found a solution.

Oddly, I just realized that if I set my screen scaling to 150% from 100% in Windows display settings, the problem goes away and firefox displays the same as Chrome.

So, questions:

Here is a codepen demonstrating the problem:

https://codepen.io/foobarbecue/pen/xvpOBm

Results on Chrome:

enter image description here

Results on Firefox:

enter image description here

Code:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<svg height="500" width="500">
        <filter id="blur">
            <feGaussianBlur stdDeviation="0"></feGaussianBlur>
        </filter>
        <pattern id="imgpattern" x="0" y="0" width="1" height="1"
                 viewBox="0 0 1024 576" preserveAspectRatio="xMidYMid slice" >
            <image width="1024" height="576" xlink:href="https://i.sstatic.net/4SrQ8.jpg" filter="url(#blur)"/>
        </pattern>
        <path class="hexTile" d="M75 -1 h150 l75 129.90 l-75 129.90 h-150 l-75 -129.9 Z"
              fill=url("#imgpattern")
              stroke="black"></path>
</svg>
</body>
</html>

Upvotes: 0

Views: 291

Answers (1)

Michael Mullany
Michael Mullany

Reputation: 31715

This is a Firefox bug - but there seems to be a workaround. If you get rid of preserveAspectRatio/viewBox inside the pattern and instead set patternContentUnits to objectBoundingBox, express the filter stdDeviation as objectBoundingBox as well (although technically it shouldn't be) AND, choose magic values for the pattern dimensions - you can get something that works in Firefox. (The filter magically uncrops when the height is set to 1.2 - not 1.1, not 1.3 - just 1.2)

<svg x="0px" y="0px" height="500px" width="500px" >
  <defs>
        <filter id="blur" y="0%" height="100%" x="0%" width="100%">
            <feGaussianBlur stdDeviation=".01"></feGaussianBlur>
        </filter>
        <pattern id="imgpattern" x="-.5" y="0" width="1.5" height="1.2"
                 patternContentUnits="objectBoundingBox">
            <image width="2" height="1" xlink:href="https://i.sstatic.net/4SrQ8.jpg" filter="url(#blur)"/>
        </pattern>
  </defs>
        <path class="hexTile" d="M75 0 h150 l75 129.90 l-75 129.90 h-150 l-75 -129.9 L 75 0"
              fill=url("#imgpattern")
              stroke="black" ></path>
</svg>

Upvotes: 2

Related Questions