Chrome中SVG坐标用calc()时父容器宽度变化不重绘问题咨询

结论 #

这是Chrome的Bug，不属于预期行为。

现象梳理 #

• 给SVG的<line>元素x2属性设置calc(100% - 20px)，初始渲染能正确匹配父容器宽度减20px的长度
• 点击按钮修改父容器宽度后，线条长度未自动更新
• 在元素检查器中重新设置一遍相同的calc(100% - 20px)值，线条能立即适配新宽度
• 若将<line>的其中一个y坐标设为百分比，父容器宽度变化时线条长度能正常更新
• Firefox和Safari目前不支持SVG元素使用calc()函数

Bug判定依据 #

Chrome既然实现了SVG元素对calc()的支持，就应当保证依赖父容器尺寸的calc()属性值，在父容器尺寸变化时自动触发重计算与重绘。当前仅在手动重设属性或修改y坐标为百分比时才生效，说明Chrome的SVG布局引擎在处理这类场景时存在逻辑缺陷：要么未正确监听父容器尺寸变化对x2属性的影响，要么重绘触发机制不完整。

处理建议 #

直接通过Chrome的官方渠道上报该Bug，提交时需包含：

• 可复现问题的最小代码示例（包含SVG结构、父容器样式、修改宽度的交互按钮）
• 详细的现象描述（初始渲染正常、父容器宽度变化后无更新、手动重设属性/y坐标为百分比时恢复正常）
• 测试所用的Chrome版本号

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