时间戳

首页 > 解决方案 > SVG 过滤器在 Firefox 上导致意外裁剪

firefox - SVG 过滤器在 Firefox 上导致意外裁剪

问题描述

我正在使用<pattern>带有<image>引用 a的 svg <filter>。我的图像将按比例缩小以适合使用preserveAspectRatio. 它在 Chrome 和 Edge 上按预期工作，但在 Firefox 上，该<filter>标签会导致图像被意外裁剪。我尝试了许多不同的定义坐标的方法来试图避免这个问题，但到目前为止还没有找到解决方案。

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

所以，问题：

这是一个演示问题的代码笔：

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

Chrome 上的结果：

在此处输入图像描述

火狐上的结果：

在此处输入图像描述

代码：

<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="http://i.stack.imgur.com/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>

标签： firefoxsvg

解决方案

这是一个 Firefox 错误 - 但似乎有一种解决方法。如果您摆脱模式内的 preserveAspectRatio/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>

推荐阅读