SVG过滤器导致Firefox意外裁剪

Question

我正在使用SVG <pattern>和引用了<image>的{​​{1}}。我的图像将按比例缩小以适合使用<filter>。它可以在Chrome和Edge上正常工作，但是在Firefox上，preserveAspectRatio标签导致图像被意外裁剪。我尝试了多种定义坐标的方法来尝试避免此问题，但到目前为止尚未找到解决方案。

奇怪的是，我刚刚意识到，如果我将Windows的显示设置中的屏幕缩放比例从100％设置为150％，问题就消失了，并且Firefox的显示效果与Chrome相同。

所以，问题：

• 这是Firefox中的错误吗？
• 有没有一种方法可以阻止它发生（我想强制扩大过滤器边界框，除了我尝试过每种方法都可以做到）？

这是一个演示问题的codepen：

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

Chrome上的结果：

在Firefox上的结果：

代码：

<filter>

Answer 1

这是Firefox的错误-但似乎有一种解决方法。如果您摆脱了模式内的reserveAspectRatio / viewBox，而是将patternContentUnits设置为objectBoundingBox，则将过滤器stdDeviation也表示为objectBoundingBox（尽管从技术上讲，它不应该如此），并且为模式尺寸选择魔术值-您可以得到一些东西在Firefox中工作。 （当高度设置为1.2-不是1.1，不是1.3-仅是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="http://i.stack.imgur.com/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>