シャドウを使用すると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>

、私は問題が何であるかを見てみましたが、私の知識は限られています。私は影が存在するときだけ凍っているので、これを引き起こしている影だと確信しています。

私は、ユーザーにGoogleの素材に基づいて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で - 彼らはエッジにかなり速いです）。複数の別々のぼかしを作成して合成する代わりに、単一のぼかしを実行してから、feComponentTransfer/feFuncAで不透明度を整形する必要があります。あなたは、私はあなたがここで見ることができますdropshadows用に構築されたフィルタ発生器からこれを実行する方法のための感覚を得ることができます。

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

普及とサイズスライダを調整し、どのように生成されたコードの変更を参照してください。

複雑なSVGフィルタは、時間がかかることがあります。私の希望は、ChromeチームがGPUでGPUを加速させることでしたが残念ながら、CSSフィルタ効果で使用されるものを加速することにのみ注意を払っているようです。