Chrome中SVG填充颜色显示异常问题及修复说明

问题根源 #

这是Chrome浏览器的一个已知渲染Bug，当SVG路径中包含重复的坐标指令（比如你的路径里C ... 500 200之后紧接着L 500 200这种冗余的定位指令）时，Chrome的渲染引擎会错误地将路径识别为两个独立的区域，导致填充颜色出现不一致的异常显示。目前这个Bug已经在Chrome的预览测试分支（Chrome Canary）中被修复。

可行的修复方案 #

你可以根据自己的需求选择以下方式解决：

• 立即测试验证：安装Chrome Canary版本，这个版本已经包含了该Bug的修复补丁，安装后就能看到预期的单一填充颜色效果。
• 等待正式更新：Chrome官方会在后续的稳定版更新中同步这个修复，你只需要保持浏览器自动更新，等待新版本推送即可。
• 临时兼容当前版本：如果需要在现有Chrome稳定版中正常显示，可以简化你的SVG路径——去掉冗余的L 500 200指令（因为前一段贝塞尔曲线已经结束在(500,200)，这个直线指令完全多余）。修改后的代码如下：

svg { fill: rgb(122, 102, 50); }

<svg viewBox="0 0 1000 600" class="card-cover" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <path d="M 100 300 C 400 300 350 200 500 200 C 650 200 600 300 850 300 Z" />
</svg>

优化后的路径不会触发Chrome的这个Bug，在当前稳定版中也能正确渲染出预期的填充颜色。

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