Chrome中JS Canvas渲染带non-scaling-stroke的放大SVG时边框过粗

测试SVG基础信息 #

• 尺寸参数：width="3.0202789"，height="2.5201435"
• 生成流程：由CAD渲染结果导入Inkscape，经冗余内容移除、裁剪优化生成，包含特殊变换
• 路径样式：所有路径设置stroke-width="1px"，并添加vector-effect="non-scaling-stroke"，按SVG规范应保持屏幕空间1px描边宽度，不受缩放影响

各环境渲染表现 #

• Firefox（108.0）与Node Canvas：将SVG加载到<img>元素并设置合理宽高后，<img>直接渲染和Canvas的ctx.drawImage()渲染效果一致，描边均保持1px宽度，符合预期（该表现两年前已正常）
• Chromium（108.0.5359.124）：<img>元素放大后渲染正常，但ctx.drawImage()方法完全忽略vector-effect="non-scaling-stroke"指令，描边宽度以视口单位计算，导致渲染异常（该问题已存在两年以上）

渲染效果对比 #

• Firefox：左侧<img>、右侧Canvas渲染的描边宽度一致，均为1px
• Chrome：左侧<img>描边符合预期，右侧Canvas渲染的描边因缩放出现异常

复现说明 #

存在最小可复现示例，可完整复现上述差异

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