使用阴影时SVG速度较慢

Question

我在一个网站上工作，在那里你可以创建svg艺术作品，这意味着你可以动态添加元素，缩放，颜色和移动它们。

问题是，当你开始在它们上面放置阴影时，一切都会开始变慢。对于这一点的现场演示，this是我正在工作的网站。

我做了一个显示问题的代码，试着在this codepen中向下滚动窗口。

​

body {
  margin: 0;
}

<!-- this SVG is created using the free tool over at www.material101.com -->

<svg height="1080" width="1920">
  <defs>
    <filter filterUnits="userSpaceOnUse" id="shadow-1">
      <feFlood flood-opacity="0.12" flood-color="rgb(0,0,0)" result="flood" id="feFlood4286" />
      <feComposite in="flood" in2="SourceGraphic" operator="in" result="composite1" id="feComposite4288" />
      <feGaussianBlur in="composite" stdDeviation="1.5" result="blur" id="feGaussianBlur4290" />
      <feOffset dx="0" dy="1" result="offset" id="feOffset4292" />
      <feComposite in="SourceGraphic" in2="offset" operator="over" result="fbSourceGraphic" id="feComposite4294" />
      <feColorMatrix result="fbSourceGraphicAlpha" in="fbSourceGraphic" values="0 0 0 -1 0 0 0 0 -1 0 0 0 0 -1 0 0 0 0 1 0" id="feColorMatrix4332" />
      <feFlood id="feFlood4334" flood-opacity="0.24" flood-color="rgb(0,0,0)" result="flood" in="fbSourceGraphic" />
      <feComposite id="feComposite4336" in2="fbSourceGraphic" in="flood" operator="in" result="composite1" />
      <feGaussianBlur id="feGaussianBlur4338" in="composite" stdDeviation="1" result="blur" />
      <feOffset id="feOffset4340" dx="0" dy="1" result="offset" />
      <feComposite id="feComposite4342" in2="offset" in="fbSourceGraphic" operator="over" result="composite2" />
    </filter>
    <filter filterUnits="userSpaceOnUse" id="shadow-2">
      <feFlood flood-opacity="0.16" flood-color="rgb(0,0,0)" result="flood" id="feFlood4348" />
      <feComposite in="flood" in2="SourceGraphic" operator="in" result="composite1" id="feComposite4350" />
      <feGaussianBlur in="composite" stdDeviation="3" result="blur" id="feGaussianBlur4352" />
      <feOffset dx="0" dy="3" result="offset" id="feOffset4354" />
      <feComposite in="SourceGraphic" in2="offset" operator="over" result="fbSourceGraphic" id="feComposite4356" />
      <feColorMatrix result="fbSourceGraphicAlpha" in="fbSourceGraphic" values="0 0 0 -1 0 0 0 0 -1 0 0 0 0 -1 0 0 0 0 1 0" id="feColorMatrix4358" />
      <feFlood id="feFlood4360" flood-opacity="0.23" flood-color="rgb(0,0,0)" result="flood" in="fbSourceGraphic" />
      <feComposite id="feComposite4362" in2="fbSourceGraphic" in="flood" operator="in" result="composite1" />
      <feGaussianBlur id="feGaussianBlur4364" in="composite" stdDeviation="3" result="blur" />
      <feOffset id="feOffset4366" dx="0" dy="3" result="offset" />
      <feComposite id="feComposite4368" in2="offset" in="fbSourceGraphic" operator="over" result="composite2" />
    </filter>
    <filter filterUnits="userSpaceOnUse" id="shadow-3">
      <feFlood flood-opacity="0.19" flood-color="rgb(0,0,0)" result="flood" id="feFlood4377" />
      <feComposite in="flood" in2="SourceGraphic" operator="in" result="composite1" id="feComposite4379" />
      <feGaussianBlur in="composite" stdDeviation="10" result="blur" id="feGaussianBlur4381" />
      <feOffset dx="0" dy="10" result="offset" id="feOffset4383" />
      <feComposite in="SourceGraphic" in2="offset" operator="over" result="fbSourceGraphic" id="feComposite4385" />
      <feColorMatrix result="fbSourceGraphicAlpha" in="fbSourceGraphic" values="0 0 0 -1 0 0 0 0 -1 0 0 0 0 -1 0 0 0 0 1 0" id="feColorMatrix4387" />
      <feFlood id="feFlood4389" flood-opacity="0.23" flood-color="rgb(0,0,0)" result="flood" in="fbSourceGraphic" />
      <feComposite id="feComposite4391" in2="fbSourceGraphic" in="flood" operator="in" result="composite1" />
      <feGaussianBlur id="feGaussianBlur4393" in="composite" stdDeviation="3" result="blur" />
      <feOffset id="feOffset4395" dx="0" dy="6" result="offset" />
      <feComposite id="feComposite4397" in2="offset" in="fbSourceGraphic" operator="over" result="composite2" />
    </filter>
    <filter filterUnits="userSpaceOnUse" id="shadow-4">
      <feFlood flood-opacity="0.25" flood-color="rgb(0,0,0)" result="flood" id="feFlood4421" />
      <feComposite in="flood" in2="SourceGraphic" operator="in" result="composite1" id="feComposite4423" />
      <feGaussianBlur in="composite" stdDeviation="14" result="blur" id="feGaussianBlur4425" />
      <feOffset dx="0" dy="14" result="offset" id="feOffset4427" />
      <feComposite in="SourceGraphic" in2="offset" operator="over" result="fbSourceGraphic" id="feComposite4429" />
      <feColorMatrix result="fbSourceGraphicAlpha" in="fbSourceGraphic" values="0 0 0 -1 0 0 0 0 -1 0 0 0 0 -1 0 0 0 0 1 0" id="feColorMatrix4431" />
      <feFlood id="feFlood4433" flood-opacity="0.22" flood-color="rgb(0,0,0)" result="flood" in="fbSourceGraphic" />
      <feComposite id="feComposite4435" in2="fbSourceGraphic" in="flood" operator="in" result="composite1" />
      <feGaussianBlur id="feGaussianBlur4437" in="composite" stdDeviation="5" result="blur" />
      <feOffset id="feOffset4439" dx="0" dy="10" result="offset" />
      <feComposite id="feComposite4441" in2="offset" in="fbSourceGraphic" operator="over" result="composite2" />
    </filter>
    <filter filterUnits="userSpaceOnUse" id="shadow-5">
      <feFlood flood-opacity="0.3" flood-color="rgb(0,0,0)" result="flood" id="feFlood4451" />
      <feComposite in="flood" in2="SourceGraphic" operator="in" result="composite1" id="feComposite4453" />
      <feGaussianBlur in="composite" stdDeviation="19" result="blur" id="feGaussianBlur4455" />
      <feOffset dx="0" dy="19" result="offset" id="feOffset4457" />
      <feComposite in="SourceGraphic" in2="offset" operator="over" result="fbSourceGraphic" id="feComposite4459" />
      <feColorMatrix result="fbSourceGraphicAlpha" in="fbSourceGraphic" values="0 0 0 -1 0 0 0 0 -1 0 0 0 0 -1 0 0 0 0 1 0" id="feColorMatrix4461" />
      <feFlood id="feFlood4463" flood-opacity="0.22" flood-color="rgb(0,0,0)" result="flood" in="fbSourceGraphic" />
      <feComposite id="feComposite4465" in2="fbSourceGraphic" in="flood" operator="in" result="composite1" />
      <feGaussianBlur id="feGaussianBlur4467" in="composite" stdDeviation="6" result="blur" />
      <feOffset id="feOffset4469" dx="0" dy="15" result="offset" />
      <feComposite id="feComposite4471" in2="offset" in="fbSourceGraphic" operator="over" result="composite2" />
    </filter>
  </defs>
  <rect x="0" y="0" width="100%" height="100%" fill="#e57373" />
  <rect x="0" y="0" width="200" height="200" fill="#c62828" transform="matrix(9,0,0,8,-675,-436)" filter="url('#shadow-3')" style="cursor: pointer;" />
  <circle cx="50" cy="50" r="50" fill="#ef5350" x="0" y="0" transform="matrix(0,0,5.0354,4.8626,-172.7689,-111.1304)" filter="url('#shadow-5')" style="cursor: pointer;" />
  <rect x="0" y="0" width="200" height="200" fill="#e53935" transform="matrix(-0.309,-0.9511,0.9511,-0.309,892.796,543.0074)" style="cursor: pointer;" />
  <rect x="0" y="0" width="200" height="200" fill="#e53935" transform="matrix(-0.0698,-1.9988,1.9988,-0.0698,307.1017,1179.8581)" style="cursor: pointer;" />
  <circle cx="50" cy="50" r="50" fill="#e53935" x="0" y="0" transform="matrix(7.1281,-3.6319,1.816,3.564,519.7993,260.3949)" filter="url('#shadow-4')" style="cursor: pointer;" />
  <polygon points="0,0,50,100,100,0" fill="#e53935" x="0" y="0" transform="matrix(1.8794,-0.684,3.0782,8.4572,26.1217,-24.6597)" filter="url('#shadow-5')" style="cursor: pointer;" />
  <polygon points="0,0,50,100,100,0" fill="#b71c1c" x="0" y="0" transform="matrix(6.6574,-2.1631,0.618,1.9021,-27.7715,158.0503)" style="cursor: pointer;" filter="url('#shadow-2')" />
  <circle cx="50" cy="50" r="50" fill="#e53935" x="0" y="0" transform="matrix(0,0,8.9658,0.7844,103.7124,131.7799)" filter="url('#shadow-1')" style="cursor: pointer;" />
  <circle cx="50" cy="50" r="50" fill="#e53935" x="0" y="0" transform="matrix(-2.8191,1.0261,-1.7101,-4.6985,369.4589,394.6201)" filter="url('#shadow-4')" style="cursor: pointer;" />
  <circle cx="50" cy="50" r="50" fill="#ef5350" x="0" y="0" transform="matrix(1.8264,-0.1598,0.1648,1.8842,381.5187,128.4891)" filter="url('#shadow-3')" style="cursor: pointer;" />
</svg>

​

现在，我试着看看问题是什么，但我的知识有限。我确信这是阴影造成的，因为只有当阴影出现时，它才会冻结。

同样重要的是要知道，我让用户从5个不同的阴影中选择，基于谷歌材料，阴影的级别越高，它就越冻结。我也在使用Snap SVG，但我不认为这与它有任何关系。

任何想法都是非常受欢迎的。

Answer 1

第一个问题：

您指定了该filterUnits=userSpaceOnUse，但是没有指定筛选器应该使用的维度。这会导致未定义的行为。在Chrome上，它似乎将每个滤镜的滤镜区域设置为整个viewBox -这会导致性能变得非常慢。删除filterUnits声明并将过滤器区域设置为x/y=-50%和height/width ="200%“，您将获得更好的性能。即

<filter id="shadow-n" x="-50%" y="-50%" width="200%" height="200%">

有了这个，你仍然有点慢，但至少你可以滚动页面！

第二个问题：

你做了很多合成和模糊操作，合成很慢(至少在Chrome中是这样--在Edge中是相当快的)。而不是做多个单独的模糊和合成它们，你应该做一个单一的模糊，然后用feComponentTransfer/feFuncA塑造不透明度。你可以从我为dropshadows构建的过滤器生成器中获得如何做到这一点的感觉，你可以在这里看到：

http://codepen.io/mullany/pen/sJopz

调整展开和大小滑块，看看生成的代码是如何变化的。

尽管如此，复杂的SVG过滤器可能会很慢。我一直希望Chrome团队的GPU加速他们，但不幸的是，他们似乎只关注加速CSS滤镜效果使用的东西。