相同transition-duration在元素上表现不一致的技术求助

问题背景 #

已在全局样式文件globals.scss中定义过渡变量，并通过通配符*将过渡样式应用到所有元素，但Header组件内按钮的SVG图标过渡时长远大于按钮背景和文本颜色的过渡时长。相关组件样式未修改过渡时长，DevTools也未发现冲突样式。

排查方向与解决方法 #

• SVG元素未正确继承过渡属性：通配符*虽然覆盖大部分元素，但SVG内部的子元素（如<path>、<circle>）可能未继承全局过渡规则。直接为SVG及其子元素显式声明过渡：

  svg, svg * {
    transition: all var(--global-transition-duration) ease;
  }
  

• 过渡属性范围不完整：如果全局过渡仅指定了background-color、color等属性，SVG的fill、stroke等属性不在其中，会导致这些属性使用浏览器默认过渡时长。更新全局过渡变量，包含SVG相关属性：

  :root {
    --global-transition: background-color, color, fill, stroke var(--global-transition-duration) ease;
  }
  * {
    transition: var(--global-transition);
  }
  

• 浏览器SVG渲染特性差异：部分浏览器对SVG过渡的处理逻辑与普通元素不同，可通过强制指定过渡属性或开启硬件加速修正：

  button svg {
    will-change: fill;
    transition: fill var(--global-transition-duration) !important;
  }
  

• 隐式默认样式干扰：浏览器对SVG有默认样式规则，可能覆盖全局过渡。重置SVG过渡并强制继承全局规则：

  svg {
    transition: inherit !important;
  }
  

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