添加all:revert CSS规则后SVG的path元素无法渲染如何解决？

修复方案 #

直接替换你现有的.svg-wrapper相关样式为以下代码即可：

.svg-wrapper svg {
  width: 100px;
  height: 100px;
  /* 覆盖全局的revert规则，恢复SVG元素默认样式 */
  all: initial;
  display: inline-block;
}

.svg-wrapper path {
  /* 覆盖全局的revert规则 */
  all: initial;
  /* 显式指定填充色，避免被重置为透明 */
  fill: #000;
}

问题原因 #

• 全局all: revert规则会重置所有元素的默认样式，包括SVG元素的默认填充色、渲染上下文属性。
• 你之前给.svg-wrapper *统一设置display: block、固定宽高是错误的：<path>是SVG图形元素，本身不遵循HTML盒模型规则，不需要设置宽高，它的渲染尺寸完全由父级<svg>的宽高、viewBox属性和自身的d路径属性决定，强制给它加块级属性和宽高会直接破坏SVG渲染上下文，导致宽高计算为0。
• all: initial不能直接加在body *上，会把所有元素样式全部重置，应该只作用于需要修复的SVG相关元素上，优先级更高就能覆盖全局的revert规则。

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