React中相同代码SVG以img和组件形式渲染显示不同且有伪影如何解决？

渲染差异核心原因 #

这是内联SVG和img加载SVG的文档上下文差异导致的，最常见的诱因是全局CSS污染：

• <img src="xxx.svg">加载的SVG属于独立的外部文档，项目内的全局CSS、父组件CSS完全无法作用到图片内部的SVG节点上，所以会严格按照SVG文件内的属性渲染。
• 写在JSX内的内联SVG是当前页面DOM树的一部分，会继承父元素的CSS属性，也会被全局通用选择器的规则命中。哪怕你组件内写的SVG属性和文件完全一致，只要全局CSS里有对svg、path标签的通用样式规则（比如额外设置了stroke-width、stroke-linejoin、stroke-dasharray等描边相关属性），就会覆盖你写在组件内的属性，出现多余的描边伪影。
• 少数情况下也可能是调用SVG组件时父级传入了未处理的额外className、style属性，或者容器存在非整数像素缩放，导致内联SVG的亚像素抗锯齿渲染和img加载的位图效果有差异。

解决方案 #

1. 给内联SVG组件增加独立的样式重置规则，阻断全局样式继承：

const StepCheckmarkSVG = () => {
    return (
        <svg 
          className="step-checkmark-svg"
          width="40" 
          height="40" 
          viewBox="0 0 40 40" 
          fill="none" 
          xmlns="http://www.w3.org/2000/svg"
        >
        <path 
          d="M9 24L13.5 28.5L31 11" 
          stroke="#626262" 
          stroke-width="3" 
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-dasharray="none"
         />
        </svg>
    );
};

对应CSS：

/* 重置该SVG及子节点的所有继承样式 */
.step-checkmark-svg, .step-checkmark-svg * {
  all: unset;
}

2. 补全所有描边相关的属性，不要依赖浏览器默认值，避免继承到外部的异常属性值。
3. 检查父组件调用时是否传入了多余的属性，如果需要支持属性透传，要优先保留组件内定义的默认属性。

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