如何减少此动画 SVG 渐变产生的延迟？

Posted 2023-03-06

【中文标题】如何减少此动画 SVG 渐变产生的延迟？

【英文标题】：How can I reduce the lag this animated SVG gradient creates?

【发布时间】：2021-09-19 07:38:00

【问题描述】：

我有一个渐变填充的 svg。它工作得非常顺利，但它影响了我在 chrome 上的其他基本 css 动画的性能。有什么方法可以保持相同的效果，但以处理器密集程度较低的方式进行？ svg 在这个 sn-p -

<svg class="background-rect"  viewBox="0 0 1440 752" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
    <g filter="url(#filter0_d)">
        <path d="M-6 724V-3.5L1442.5 -3.49997V401L-6 724Z" fill="url(#paint0_linear)"/>
    </g>
    <defs>
        <filter id="filter0_d" x="-26" y="-15.5"   filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
            <feFlood flood-opacity="0" result="BackgroundImageFix"/>
            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
            <feOffset dy="8"/>
            <feGaussianBlur stdDeviation="10"/>
            <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
        </filter>
        <linearGradient id="paint0_linear" x1="764" y1="-37.5" x2="764" y2="691.999" gradientUnits="userSpaceOnUse">
            <stop offset="0" stop-color="#F45B69">
                <animate attributeName="stop-color" values="#F45B69;#5E93E2;#68C5DB;#F45B69" dur="20s" repeatCount="indefinite"  /> 
            </stop>
            <stop offset="0.5" stop-color="#5E93E2">
                <animate attributeName="stop-color" values="#5E93E2;#68C5DB;#F45B69;#5E93E2" dur="20s" repeatCount="indefinite"  /> 
            </stop>
            <stop offset="0.54" stop-color="#5E93E2">
                <animate attributeName="stop-color" values="#5E93E2;#68C5DB;#F45B69;#5E93E2" dur="20s" repeatCount="indefinite"  /> 
            </stop>
            <stop offset="1" stop-color="#68C5DB">
                <animate attributeName="stop-color" values="#68C5DB;#F45B69;#5E93E2;#68C5DB" dur="20s" repeatCount="indefinite"  /> 
            </stop>
        </linearGradient>
    </defs>
</svg>

【问题讨论】：

好吧，我可能会尝试摆脱过滤器，看看是否有帮助 - 如果过滤器非常复杂或有很大的模糊，应用过滤器的动画可能会很慢。

@MichaelMullany 谢谢 - 就是这样！

【参考方案1】：

Michael 是对的 - 从 svg 中删除过滤器有很大帮助