SVG分组内路径fill过渡延迟问题求助（Svelte环境）

我在实现鼠标悬停时SVG所有path的fill过渡效果时，碰到了一个奇怪的问题：<g>分组里的path过渡有微小延迟，但单独放在SVG根节点的最后一个path过渡完全正常。用的是Svelte框架，所以CSS里用了:global选择器来穿透样式隔离。

相关代码如下：

SVG代码 #

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  <g>
    <path d="M3.5 3.5H10.5V10.5H3.5V13.5Z" />
    <path d="M3.5 13.5H10.5V20.5H3.5V13.5Z" />
    <path d="M13.5 3.5H20.5V10.5H13.5V3.5Z" />
    <path d="M13.5 13.5H20.5V20.5H13.5V13.5Z" />
  </g>
  <path
    d="M3.5 3.5V2.75C3.08579 2.75 2.75 3.08579 2.75 3.5H3.5ZM10.5 3.5H11.25C11.25 3.08579 10.9142 2.75 10.5 2.75V3.5ZM10.5 10.5V11.25C10.9142 11.25 11.25 10.9142 11.25 10.5H10.5ZM3.5 10.5H2.75C2.75 10.9142 3.08579 11.25 3.5 11.25V10.5ZM3.5 13.5V12.75C3.08579 12.75 2.75 13.0858 2.75 13.5H3.5ZM10.5 13.5H11.25C11.25 13.0858 10.9142 12.75 10.5 12.75V13.5ZM10.5 20.5V21.25C10.9142 21.25 11.25 20.9142 11.25 20.5H10.5ZM3.5 20.5H2.75C2.75 20.9142 3.08579 21.25 3.5 21.25V20.5ZM13.5 3.5V2.75C13.0858 2.75 12.75 3.08579 12.75 3.5H13.5ZM20.5 3.5H21.25C21.25 3.08579 20.9142 2.75 20.5 2.75V3.5ZM20.5 10.5V11.25C20.9142 11.25 21.25 10.9142 21.25 10.5H20.5ZM13.5 10.5H12.75C12.75 10.9142 13.0858 11.25 13.5 11.25V10.5ZM13.5 13.5V12.75C13.0858 12.75 12.75 13.0858 12.75 13.5H13.5ZM20.5 13.5H21.25C21.25 13.0858 20.9142 12.75 20.5 12.75V13.5ZM20.5 20.5V21.25C20.9142 21.25 21.25 20.9142 21.25 20.5H20.5ZM13.5 20.5H12.75C12.75 20.9142 13.0858 21.25 13.5 21.25V20.5ZM3.5 4.25H10.5V2.75H3.5V4.25ZM9.75 3.5V10.5H11.25V3.5H9.75ZM10.5 9.75H3.5V11.25H10.5V9.75ZM4.25 10.5V3.5H2.75V10.5H4.25ZM3.5 14.25H10.5V12.75H3.5V14.25ZM9.75 13.5V20.5H11.25V13.5H9.75ZM10.5 19.75H3.5V21.25H10.5V19.75ZM4.25 20.5V13.5H2.75V20.5H4.25ZM13.5 4.25H20.5V2.75H13.5V4.25ZM19.75 3.5V10.5H21.25V3.5H19.75ZM20.5 9.75H13.5V11.25H20.5V9.75ZM14.25 10.5V3.5H12.75V10.5H14.25ZM13.5 14.25H20.5V12.75H13.5V14.25ZM19.75 13.5V20.5H21.25V13.5H19.75ZM20.5 19.75H13.5V21.25H20.5V19.75ZM14.25 20.5V13.5H12.75V20.5H14.25Z"
  />
</svg>

CSS代码 #

.container :global(svg *) {
  fill: var(--default-color);
  transition: fill var(--hover-transition) !important;
  transition-delay: 0s !important;
}

问题原因 #

浏览器处理SVG样式时，<g>元素作为容器会继承并传递样式给子元素。当用svg *选择器时，<g>和它内部的path都会被应用样式规则。浏览器可能会先计算<g>的样式变化，再将变化传递给子path，这个传递过程就导致了微小延迟；而单独的path没有中间层级，过渡触发时机完全同步。

解决方案 #

方案1：移除<g>标签 #

直接把所有path放在SVG根节点下，消除中间层级的样式传递，让所有path处于同一优先级，过渡触发时机完全同步。这也是你发现的有效方法。

方案2：精准选择path元素 #

修改CSS选择器，直接针对所有path，避免<g>元素的样式干扰：

.container :global(svg path) {
  fill: var(--default-color);
  transition: fill var(--hover-transition);
}

方案3：统一<g>和path的过渡属性 #

给<g>元素也显式设置fill和过渡属性，确保容器和子元素的过渡行为一致：

.container :global(svg g),
.container :global(svg path) {
  fill: var(--default-color);
  transition: fill var(--hover-transition);
}

这几个方案都能解决过渡延迟的问题，你可以根据自己的代码结构选择最合适的方式。

内容的提问来源于stack exchange，提问作者Esaias Cronelius