时间戳

首页 > 解决方案 > 如何减少此动画 SVG 渐变创建的延迟？

html - 如何减少此动画 SVG 渐变创建的延迟？

问题描述

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

<svg class="background-rect" height="752" 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" width="1488.5" height="767.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>

标签： htmlcssgoogle-chromesvgcss-selectors

解决方案

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

推荐阅读