如何在Safari上使用简单的SVG过滤器并具有可接受的性能并且不会崩溃？

Question

免责声明：这篇文章是我在尝试寻找解决方案时的实验的一半问题和一半报告。

任务：单色矩形上的简单SVG过滤器

在SVG中使用滤镜更改或修改单色形状的颜色非常简单。这是可以完成的方法：

<svg viewBox="0 0 460 130">
  <defs>
    <filter id="filter1">
      <feColorMatrix values="0.5 0 0 0 0 0 0.5 0 0 0 0 0 0.5 0 0 0 0 0 1 0" />
    </filter>
  </defs>
  <g transform="translate(20, 0)">
    <text x="0" y="35">Original</text>
    <rect x="0" y="50" width="200" height="80" fill="red" />
  </g>
  <g transform="translate(240, 0)">
    <text x="0" y="35">Filtered</text>  
    <rect x="0" y="50" width="200" height="80" fill="red" filter="url(#filter1)" />
  </g>
</svg>

问题：在Safari上运行缓慢，在Safari Mobile上崩溃

这个的小问题是它在Safari上的运行速度确实很慢。在下面的代码段中，每半秒钟将一个新的经过过滤的rect添加到SVG。这最终会在10-80个周期后在Safari手机上崩溃，具体取决于您的设备。而且，它的速度令人难以忍受。为了进行比较，在运行Chrome的入门级Android手机上，该手机几乎可以一开始以50 fps的速度永远运行。

var rectCount = 1;
var svgRectElem = document.getElementById('svg-rect');
var rectCountElem = document.getElementById('rect-count');
var fpsElem = document.getElementById('fps');

(function insertRect() {
  window.requestAnimationFrame(function() {
    var start = new Date().getTime();
  
    var clonedSvgRectElem = svgRectElem.cloneNode();

    // insert cloned rect SVG element
    svgRectElem.parentNode.appendChild(clonedSvgRectElem);

    rectCountElem.textContent = ++rectCount;

    window.requestAnimationFrame(function() {
      var fps = Math.round(100000 / (new Date().getTime() - start)) / 100;
      fpsElem.textContent = fps;
      window.setTimeout(insertRect, 500);
    }, 100);
  });
})();

<p>SVG Rect Count: <span id="rect-count">1</span></p>
<p>fps: <span id="fps"></span></p>

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="512" height="512" viewBox="0,0,1024,1024">
  <defs>
    <filter id="filter-1">
      <feColorMatrix values="0.5 0 0 0 0 0 0.5 0 0 0 0 0 0.5 0 0 0 0 0 1 0" />
    </filter>
  </defs>
  <rect id="svg-rect" fill="red" filter="url(#filter-1)" x="0" y="0" width="1024" height="1024" />
</svg>

Snippet on CodePen

可能的解决方案：到目前为止我想到的是什么

我尝试了几种方法，但是如您所见。如您所见，其中一些适用于Safari，每个都有一个功能。

1。等待WebKit团队进行修复

tl; dr也许行得通，也许行不通

这将是最方便的选择，但是如果您认为SVG过滤器是15年前推出的，那么我将不为所动，很快就解决此问题。是的，我写了一个错误报告。

2。使用filterRes

tl; dr有效，但仅在下一个Safari版本

之前有效

在SVG 1.1中，定义了属性filterRes。这指定了滤镜的分辨率。值为1表示滤镜的源将被视为单个像素。因此，不必运行所有像素，只需将滤镜应用于一个像素即可。由于我们使用单一颜色的矩形作为输入图像，因此在本例中可以将整个图像视为一个像素。

在我们的示例中，过滤器将如下所示：

<filter id="filter1" filterRes="1">
  <feColorMatrix values="0.5 0 0 0 0 0 0.5 0 0 0 0 0 0.5 0 0 0 0 0 1 0" />
</filter>

Snippet on CodePen

这实际上可以大大提高性能，并且不会发生崩溃！

可悲的消息是filterRes已从2.0版的SVG标准中删除。 WebKit很快适应了SVG 2.0的这一部分，并决定在下一版本中将其删除。如果我们依靠filterRes，同样的问题很快就会再次出现。

3。过滤一个小矩形，然后放大

tl; dr不起作用

以上方法表明，在较小的区域上应用滤镜可以大大提高性能。在那里，我们将滤镜应用到小矩形上，然后将结果按比例缩放到所需的大小。为了缩放，我们使用transform属性。如果将rect设置为所需大小的1/64，我们将使用transform="scale(64)"对其进行缩放，以使最终大小为1024。

Snippet on CodePen

不幸的是，这根本不起作用。性能保持不变，并且在Safari移动版上仍然崩溃。有趣的是，这不能仅归因于滤波器或变换。只有结合起来，它才会变慢并崩溃。

4过滤一个小的矩形，然后使用feTile填充目标矩形

tl; dr有点用，但是在Chrome上有人工痕迹

此方法类似于先前的方法。我们先将滤镜应用于一个小矩形，然后再将第二个滤镜与feTile配合使用以填充目标矩形。

Snippet on CodePen

这在Safari移动版上有效。不如filterRes，但有很大的改进。

但是，对于这种方法， Chrome是聚会中的力量。如果您在Chrome上缩放缩放，则在某些缩放级别上会显示栅格。这是它的外观（正确的是一个大正方形）：

5为过滤器的宽度和高度使用巨大的值

tl; dr可以，但是被黑客入侵并在Internet Explorer上引起问题

这是一种非常相反的直观方法。将滤镜区域的宽度和高度设置为非常大的值将使滤镜变慢得多，因为必须处理成千上万的像素。但是实际上情况恰恰相反。 WebKit上的筛选器速度大大提高，并且没有崩溃。

在我们的示例中，这是实现方法：

<filter id="filter-1" x="0" y="0" width="102400" height="102400" filterUnits="userSpaceOnUse">
  <feColorMatrix values="0.5 0 0 0 0 0 0.5 0 0 0 0 0 0.5 0 0 0 0 0 1 0" />
</filter>

Snippet on CodePen

我认为这里发生的事情是，过滤器首先缩小原始过滤器区域，然后处理将在SVG的viewBox中看到的部分（缩小后的区域很小），然后再次将该区域放大。这看起来很快。

不幸的是，这确实是一个hack，我们现在还无法确定未来的浏览器版本将如何处理如此大的价值的SVG。同样，这也会在Internet Explorer上引起问题，在Internet Explorer中，文档的滚动区域将变得很大（可能是因为筛选器的边界已计算到大小中），从而几乎无法进行滚动。而且，如果您选择的值太小，Internet Explorer实际上将以过滤器边界的大小显示矩形。

解决方案是什么？

实际上，我不知道。使用filterRes有一个简单的解决方案，但是它将很快过期（WebKit技术预览中已不支持该解决方案），因此这不是一个选择。所有其他方法都会在其他浏览器上引起问题。

您能想到我可以尝试的其他方法吗？我不敢相信在SVG 1.1规范发布15年后跨浏览器使用SVG过滤器真是一次冒险。

Answer 1

尝试一下：

将所有矩形归为一组，然后将过滤器应用于该组。

var rectCount = 1;
var svgRectElem = document.getElementById('svg-rect');
var rectCountElem = document.getElementById('rect-count');
var fpsElem = document.getElementById('fps');

(function insertRect() {
  window.requestAnimationFrame(function() {
    var start = new Date().getTime();
  
    var clonedSvgRectElem = svgRectElem.cloneNode();

    // insert cloned rect SVG element
    svgRectElem.parentNode.appendChild(clonedSvgRectElem);

    rectCountElem.textContent = ++rectCount;

    window.requestAnimationFrame(function() {
      var fps = Math.round(100000 / (new Date().getTime() - start)) / 100;
      fpsElem.textContent = fps;
      window.setTimeout(insertRect, 500);
    }, 100);
  });
})();

<p>SVG Rect Count: <span id="rect-count">1</span></p>
<p>fps: <span id="fps"></span></p>

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="512" height="512" viewBox="0,0,1024,1024">
  <defs>
    <filter id="filter-1">
      <feColorMatrix values="0.5 0 0 0 0 0 0.5 0 0 0 0 0 0.5 0 0 0 0 0 1 0" />
    </filter>
  </defs>
  <g filter="url(#filter-1)">
    <rect id="svg-rect" fill="red" x="0" y="0" width="1024" height="1024" />
  </g>
</svg>