chrome 中 svg 元素的 `x2="calc(100% - 20px)"` 等 css `calc()` 值在父容器尺寸动态变化时不会自动更新，属已知兼容性限制；推荐改用 `padding-right` + `x2="100%"` 的纯 css 方案实现等效响应式效果。
SVG 的
更关键的是，该行为缺乏跨浏览器一致性：Firefox 和 Safari 完全不支持 calc() 用于 SVG 坐标属性，因此直接使用 x2="calc(100% - 20px)" 会立即导致降级失效。真正健壮、可维护的方案应规避对 SVG 属性级 calc() 的依赖。
✅ 推荐解决方案：利用 SVG 容器的 CSS 盒模型控制可用绘图区域
通过为
⚠️ 注意事项：
- padding-right 必须配合 box-sizing: border-box 使用，确保 width: 100% 指代的是内容区 + 内边距的总宽，避免意外溢出；
- 所有坐标值（如 x1, x2, y1, y2）建议省略单位（如 "0" 而非 "0px"），符合 SVG 规范，提升兼容性；
- 若需多条不同偏移的线，可统一用 padding-right 控制基准，再结合 x1/x2 的相对数值微调（例如 x2="95%"）；
- 此法同样适用于
、 等依赖水平尺寸的图形。
总结：与其依赖 Chrome 特有的、不可靠的 SVG calc() 行为，不如回归 CSS 盒模型本质——用 padding 定义安全边距，用 100% 表达弹性伸缩。这一方案零 JS 计算、全浏览器兼容、自动响应式，是生产环境 SVG 布局的最佳实践。
