我正在创建svg图稿的网站上工作,这意味着您可以动态添加元素,缩放,颜色并移动它们。使用阴影时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,但我认为这与它没有任何关系。
任何想法都非常感谢球员。
过滤器维度属性具有默认值。行为不是未定义的。 –
感谢您的详细解释。我会稍后再尝试一下,看看它是如何发展的。我仍然是一个新手,因为你可以看到:) – Duane
@Paul过滤器尺寸属性具有默认值,当过滤器单位是默认或objectBoundingBox。如果你阅读规范,当filterUnits是userSpaceOnUse - >未定义行为时,没有指定默认值。 –