使用阴影时SVG速度较慢

Question

我正在创建svg图稿的网站上工作，这意味着您可以动态添加元素，缩放，颜色并移动它们。

事情是，当你开始在他们身上投下阴影时，一切都会开始放慢速度。对于这个现场演示，this是我正在处理的网站。

我做了一个codepen，显示了问题的确切点，试着在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上，它好像将过滤器区域设置为每个过滤器的整个视图框一样 - 这导致性能疯狂地降低。删除filterUnits声明并将您的过滤器区域设置为x/y = -50％和height/width =“200％”，您将获得更好的性能。即

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

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

问题二：

你做了很多合成和模糊操作和合成的速度很慢（至少在浏览器 - 它们是非常快的边缘）。不要做多个单独的模糊和合成它们，你应该做一个模糊，然后用feComponentTransfer/feFuncA来塑造不透明度。你可以得到如何从一个过滤器发生器我为的阴影效果，你可以在这里看到这样做的感觉：

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

调整传播和大小滑块，看看如何生成的代码更改。

所有这一切，复杂的SVG过滤器可以是缓慢的，周期。我希望Chrome团队能够加速GPU，但不幸的是，他们似乎只关注加速CSS滤镜效果所使用的东西。