Elementor刷新页面logo出现灰边 替换SVG后滚动缩放CSS失效

（更新）问题目前已解决50%：经排查，刷新/跳转页面时logo短暂出现灰边的问题源自PNG格式文件，将logo替换为SVG格式后，该闪烁故障不再出现，但随之产生了新的适配问题。
核心诉求：让SVG格式logo和此前的PNG格式logo一样响应滚动缩放的自定义代码效果，同时彻底消除页面加载时的logo灰边问题。
此前编写CSS代码实现了页面滚动时logo自动缩小的效果，但该代码对SVG格式logo无效，即便给SVG元素添加了.logo类名仍无法触发效果。
问题现象可通过两种状态对比：

• 正常状态：首页logo无灰边，尺寸符合预期
• 异常状态：刷新页面或跳转至其他页面时，logo会短暂出现灰色轮廓，一闪而过后消失；替换为SVG格式logo后灰边消失，但滚动缩放效果失效

原有代码梳理 #

最初适配PNG logo的CSS代码 #

.logo img {
max-width: 110px;
height: auto;
transition: all 1s ease;
}

.elementor-sticky--effects .logo img {
max-width: 80px;
height: auto;
}

出现灰边问题时在Elementor Pro中添加的完整自定义CSS #

selector.elementor-sticky--effects{
background-color: rgba(0,0,0,0.7)!important
}

selector{
transition: background-color 1s ease !important;
}

selector.elementor-sticky--effects >.elementor-container{
min-height: 70px;
}

selector > .elementor-container{
transition: min-height 1s ease !important;
}

.logo img {
max-width: 110px;
height: auto;
transition: all 1s ease;
}

/* 此处存在多余的右花括号，属于语法错误，会导致后续样式解析异常 */
}

.elementor-sticky--effects .logo img {
max-width: 90px;
height: auto;
}

解决方案 #

1. 修复基础语法错误 #

首先删除上述代码中冗余的右花括号，避免浏览器解析CSS时出现规则错乱。

2. 调整选择器适配SVG元素 #

原有CSS规则只命中.logo容器下的img标签，内联或作为组件插入的SVG属于独立标签，不会被原有选择器匹配，需要扩展选择器覆盖SVG元素，同时补充SVG渲染规则避免灰边：

/* 统一适配logo容器下的图片和SVG元素 */
.logo img,
.logo svg {
max-width: 110px;
height: auto;
transition: all 1s ease;
/* 重置默认样式，消除加载时的灰色描边/轮廓 */
outline: none;
border: none;
box-shadow: none;
/* 确保SVG填充色继承自定义设置，避免透明区域渲染异常 */
fill: currentColor;
}

/* 滚动触发粘性状态时的缩放规则 */
.elementor-sticky--effects .logo img,
.elementor-sticky--effects .logo svg {
max-width: 80px;
height: auto;
}

/* 保留原有粘性头部样式 */
selector.elementor-sticky--effects{
background-color: rgba(0,0,0,0.7)!important
}

selector{
transition: background-color 1s ease !important;
}

selector.elementor-sticky--effects >.elementor-container{
min-height: 70px;
}

selector > .elementor-container{
transition: min-height 1s ease !important;
}

3. 彻底消除加载灰边的补充配置 #

• 导出SVG文件时确认无内置描边，背景设置为透明，不要保留编辑软件添加的默认占位矩形
• 在Elementor中使用SVG作为logo时，将组件的边框宽度设为0，默认阴影效果关闭，避免资源加载完成前组件默认样式渲染出灰色占位边框
• 给logo容器设置固定的宽高占位值，避免页面加载阶段容器高度塌陷导致的渲染闪烁

内容的提问来源于stack exchange，提问作者Sergio Galfaro Dantas