问题

Question

问题

在Webflow中创建的live site is here。当您将鼠标悬停在菜单项上时，通过将其他背景设置为0％不透明度并将此背景设置为100％不透明度来更改background-img。我的问题是使用第一个SVG（标题为“ 390 KB SVG”），它具有约1,000个元素。

在Firefox，Edge和Internet Explorer中，此相对较大的SVG会被渲染一次，然后被缓存以在以后每次显示。 在Chrome中，每次悬停事件都会强制重新渲染相同的SVG ，每次耗时在150ms（i5-8600K）至600ms（i5-6200U）之间。

我们可以以某种方式在Chrome中启用呈现SVG缓存吗？还是整体提高SVG渲染性能？较小的SVG在Chrome中渲染速度足够快。

我已经尝试过的东西

SVG是从Adobe Illustrator CC 2019导出的2500px x 1250px，1精度SVG。AdobeIllustrator的原始输出为762 KB。我已经将有问题的762 KB SVG优化到了390 KB：

增大画板尺寸as described here后，将精度降低到1。
Used SVGOMG删除几乎所有元数据。
Used Vecta.IO's SVG Nano tool进一步缩小和压缩。
Used SVGito重用相同的路径。

虽然它肯定比初始输出快，但在较慢的系统上渲染仍需要约500+ ms。

我还尝试了其他方法来更改背景，例如显示：不显示，或者不通过0％的不透明度隐藏背景，而仅通过1％的不透明度来隐藏背景：bt甚至是1％，Chrome都需要重新渲染以将它的不透明度从1％提高到100％。

SVG代码及其调用方式

可以在此处查看SVG的代码：https://codepen.io/TG2-/pen/EBXEGO

SVG是通过Java脚本调用的，就像这样，Webflow's built-in JavaScript（称为“交互IX2”）：

            }, {
                "id": "a-11-n-7",
                "actionTypeId": "STYLE_OPACITY",
                "config": {
                    "delay": 0,
                    "easing": "",
                    "duration": 0,
                    "target": {
                        "id": "92202c53-63db-1dc1-831b-53546fc80f59"
                    },
                    "value": 0,
                    "unit": ""
                }
            }, {
                "id": "a-11-n-8",
                "actionTypeId": "STYLE_OPACITY",
                "config": {
                    "delay": 0,
                    "easing": "",
                    "duration": 0,
                    "target": {
                        "id": "92202c53-63db-1dc1-831b-53546fc80f60"
                    },
                    "value": 1,
                    "unit": ""
                }
            }]

预期结果：

1）将鼠标悬停在第一个菜单项（“ 390 KB SVG”）上，应在Chrome中相对立即（最好在50毫秒内）更改背景图片

（**与其他浏览器一样，通过缓存渲染的SVG或通过提高Chrome中的渲染性能来实现）

实际结果：

1）悬停在第一个菜单项（“ 390 KB SVG”）上，根据用户CPU的速度，背景图像会在200毫秒至600毫秒后改变。

解决方案（归功于Kaiido和Paul LeBeua）

将SVG模式更改为SVG填充。这是使用样式的旧SVG ：

<style>
        <![CDATA[.B {
            fill: url(#C)
        }

        .C {
            fill: url(#B)
        }

        .D {
            fill: url(#A)
        }

        .E {
            fill: url(#E)
        }

        .F {
            fill: url(#D)
        }

        ]]>
    </style>
    <defs>
        <pattern id="A" width="3" height="3" patternTransform="matrix(50 0 0 50 -892 -730.5)" patternUnits="userSpaceOnUse">
            <path fill="#7c26cc" d="M0 0h3v3H0z" />
        </pattern>
        <pattern id="B" width="3" height="3" patternTransform="matrix(50 0 0 50 -892 -730.5)" patternUnits="userSpaceOnUse">
            <path fill="#b45ffe" d="M0 0h3v3H0z" />
        </pattern>
        <pattern id="C" width="3" height="3" patternTransform="matrix(50 0 0 50 -892 -730.5)" patternUnits="userSpaceOnUse">
            <path fill="#b9b9b9" d="M0 0h3v3H0z" />
        </pattern>
        <pattern id="D" width="3" height="3" patternTransform="matrix(50 0 0 50 -892 -730.5)" patternUnits="userSpaceOnUse">
            <path fill="#e1e1e1" d="M0 0h3v3H0z" />
        </pattern>
        <pattern id="E" width="3" height="3" patternTransform="matrix(50 0 0 50 -892 -730.5)" patternUnits="userSpaceOnUse">
            <path fill="#e3d3ed" d="M0 0h3v3H0z" />
        </pattern>

这是新的SVG，使用填充：

<style><![CDATA[.B {
    fill: #b9b9b9
}

.C {
    fill: #b45ffe
}

.D {
    fill: #7c26cc
}

.E {
    fill: #e3d3ed
}

.F {
    fill: #e1e1e1
}

]]></style>

Answer 1

@Kaiido的直觉似乎是正确的。它似乎与该SVG中<pattern>元素的使用有关。如果您将该SVG中的CSS更改为直接使用颜色，则SVG的渲染速度会更快。

例如：您要做的就是将颜色从图案复制到关联的样式：

.A { fill: #7c26cc; }

等

这里使用模式毫无用处。

Google Chrome浏览器会缓存呈现的SVG吗？如果不是，我们应该如何针对SVG优化SVG？

问题

我已经尝试过的东西

SVG代码及其调用方式

预期结果：

实际结果：

解决方案（归功于Kaiido和Paul LeBeua）

1 个答案: